I want to make the table transparent and I want to see the background image through the table list which is striped with different colors.
I have tried the following but it didn't work.
<style> #loading {
position: absolute; width: 100%; height: 100%; background: url('http://www.jettools.com/images/animated_spinner.gif') no-repeat center center;
}
</style>
<div id="loading"></div>
<table style="background: transparent !important;">
<thead>
<th></th><th></th><th></th><th></th>
</thead>
<tbody style="background: transparent !important;" >
<tr>
<td title="">
</td>
<td title=""
</td>
<td title="">
</td>
<td title="">
</td>
</tr>
</tfoot> </tfoot>
</tbody>
</table>
Related
I have a table with two rows of headings. I want to set the widths of some of the columns in the second row. I set up a Codepen to test it out. I find that if I remove the first row of headings, it takes the column widths I've specified without a problem. But with the first row of headings, it ignores the widths of the columns in the second row. :(
Please note that I have div's within the th's so I can style the borders.
Here's the Code:
body {
padding: 10px;
}
.data-table {
width: 100%;
border-spacing: 0 4px;
border-collapse: separate;
table-layout: fixed;
}/* Remove For SCSS*/
.title-11, .title-21 {
width: 40px;
}
.title-22 {
width: 100px;
}
.title-24 {
width: 100px;
}
thead tr th {
border-collapse: separate;
border-spacing: 0 5px;
}
.title {
/*
background: linear-gradient(to right, transparent 0%, #bbb 0%,
#bbb calc(100% - 10px),
transparent calc(100% - 10px)) 0 99% / 100% 1px
no-repeat;
*/
text-align: left;
padding-right: 10px;
}
.div-title {
border-bottom: 1px solid #bbb;
}
.hdr-field {
width: 150px;
}
tr .title:last-child {
padding-right: 0;
}
.side-title {
transform: rotate(-90deg);
width: 25px;
}
.fieldname {
width: 130px;
}
.fieldvalue.dest-data input[type=text] {
width: 100%;
}
.bodySection {
border-bottom: 10px solid #bbb;
margin-bottom: 10px;
}
tr {
// border-bottom: 10px solid #bbb;
}
/*}*//* For SCSS*/
<table class="data-table">
<thead>
<tr>
<th class="title-11"></th>
<th colSpan="2" class="title title-12">
<div class="div-title">Source</div>
</th>
<th colSpan="2" class="title title-13">
<div class="div-title">Destination</div>
</th>
</tr>
<tr>
<th class="title-21"></th>
<th colSpan="1" class="fieldname title title-22">
<div class="div-title hdr-field">Field</div>
</th>
<th colSpan="1" class="title title-23">
<div class="div-title">Value</div>
</th>
<th colSpan="1" class="fieldname title title-24">
<div class="div-title hdr-field">Field</div>
</th>
<th colSpan="1" class="title title-25">
<div class="div-title">Value</div>
</th>
</tr>
</thead>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name</td>
<td class="fieldname src-data">Short Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
</tbody>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name2</td>
<td class="fieldname src-data">Short Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
</tbody>
</table>
So just to clarify: the question is how to make the Field columns fixed width, while leaving the Value columns to find their own level.
Thank you.
I can't quite understand why and how table lay-outs are calculated, because the algorythm seems pretty complex.
However, you can achieve the desired lay-out by using a good ol' <colgroup>.
There's some not-too-hard to digest info about how to use them in the HTML4 spec | Calculating column width. Note that this also holds true for the new spec (col and colgroup are not deprecated).
Stick this in between <table> and <thead> in your fiddle:
<colgroup>
<col>
<col width="150">
<col>
<col width="150">
<col>
</colgroup>
DEMO working:
body {
padding: 10px;
}
.data-table {
width: 100%;
border-spacing: 0 4px;
border-collapse: separate;
table-layout: fixed;
}/* Remove For SCSS*/
.title-11, .title-21 {
width: 40px; /* Wont be applied */
}
.title-22 {
width: 100px; /* Wont be applied */
}
.title-24 {
width: 100px; /* Wont be applied */
}
thead tr th {
border-collapse: separate;
border-spacing: 0 5px;
}
.title {
/*
background: linear-gradient(to right, transparent 0%, #bbb 0%,
#bbb calc(100% - 10px),
transparent calc(100% - 10px)) 0 99% / 100% 1px
no-repeat;
*/
text-align: left;
padding-right: 10px;
}
.div-title {
border-bottom: 1px solid #bbb;
}
.hdr-field {
width: 150px;
}
tr .title:last-child {
padding-right: 0;
}
.side-title {
transform: rotate(-90deg);
width: 25px;
}
.fieldname {
width: 130px;
}
.fieldvalue.dest-data input[type=text] {
width: 100%;
}
.bodySection {
border-bottom: 10px solid #bbb;
margin-bottom: 10px;
}
tr {
// border-bottom: 10px solid #bbb;
}
/*}*//* For SCSS*/
<table class="data-table">
<colgroup>
<col width="40">
<col width="100">
<col>
<col width="100">
<col>
</colgroup>
<thead>
<tr>
<th class="title-11"></th>
<th colSpan="2" class="title title-12">
<div class="div-title">Source</div>
</th>
<th colSpan="2" class="title title-13">
<div class="div-title">Destination</div>
</th>
</tr>
<tr>
<th class="title-21"></th>
<th class="fieldname title title-22">
<div class="div-title hdr-field">Field</div>
</th>
<th class="title title-23">
<div class="div-title">Value</div>
</th>
<th class="fieldname title title-24">
<div class="div-title hdr-field">Field</div>
</th>
<th class="title title-25">
<div class="div-title">Value</div>
</th>
</tr>
</thead>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name</td>
<td class="fieldname src-data">Short Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
</tr>
</tbody>
<tbody class="bodySection">
<tr>
<td rowSpan="2" class="side-title">Name2</td>
<td class="fieldname src-data">Short Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Short Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
<tr>
<td class="fieldname src-data">Long Name2</td>
<td class="fieldvalue src-data"My Store/td>
<td class="fieldname dest-data">Long Name2</td>
<td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
</tr>
</tbody>
</table>
I’m trying to automate and select the drop down values.
2 fields are having same drop down values (i.e.). Yes and No and both field has similar HTML code . So unable to find unique Xpath in order to click on second field and it is throwing an org.openqa.selenium.ElementNotInteractableException exception. Since the tag name is not SELECT, so I couldn’t use SELECT Class.
HTML Code:
1st Field
<table id="ssl" class="x-field dropdown x-form-item x-box-item x-field-default x-vbox-form-item x-form-dirty" style="margin: 0px; width: 660px; table-layout: fixed; left: 9px; top: 36px;" cellpadding="0">
<tbody>
<tr id="ssl-inputRow">
<td id="ssl-labelCell" class="x-field-label-cell" style="" halign="left" width="385" valign="top">
<label id="ssl-labelEl" class="x-form-item-label x-form-item-label-left" for="ssl-inputEl" style="width:380px;margin-right:5px;">Use SSL to connect to NetScaler </label>
</td>
<td id="ssl-bodyEl" class="x-form-item-body x-form-trigger-wrap-focus" colspan="2" role="presentation" style="width: 100%;">
<table id="ssl-triggerWrap" class="x-form-trigger-wrap" style="width: 100%; table-layout: fixed;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="ssl-inputCell" class="x-form-trigger-input-cell" style="width: 100%;">
<div id="ext-gen1668" class="x-hide-display x-form-data-hidden" role="presentation"></div>
<input id="ssl-inputEl" class="x-form-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus" autocomplete="off" name="ssl" readonly="readonly" style="width: 100%; -moz-user-select: text;" aria-invalid="false" data-errorqtip="" type="text">
</td>
<td id="ext-gen1667" class="x-trigger-cell" style="width:22px" valign="top">
<div id="ext-gen1666" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-last x-unselectable" role="button" style="-moz-user-select: none;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
2nd Field:
<table id="isDiscovery" class="x-field dropdown x-form-item x-box-item x-field-default x-vbox-form-item x-form-dirty" style="margin: 0px; width: 660px; table-layout: fixed; left: 9px; top: 67px;" cellpadding="0">
<tbody>
<tr id="isDiscovery-inputRow">
<td id="isDiscovery-labelCell" class="x-field-label-cell" style="" halign="left" width="385" valign="top">
<label id="isDiscovery-labelEl" class="x-form-item-label x-form-item-label-left" for="isDiscovery-inputEl" style="width:380px;margin-right:5px;">Discover StoreFront hosts using this NetScaler </label>
</td>
<td id="isDiscovery-bodyEl" class="x-form-item-body" colspan="2" role="presentation" style="width: 100%;">
<table id="isDiscovery-triggerWrap" class="x-form-trigger-wrap" style="width: 100%; table-layout: fixed;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="isDiscovery-inputCell" class="x-form-trigger-input-cell" style="width: 100%;">
<div id="ext-gen1671" class="x-hide-display x-form-data-hidden" role="presentation"></div>
<input id="isDiscovery-inputEl" class="x-form-field x-form-text" autocomplete="off" name="isDiscovery" readonly="readonly" style="width: 100%; -moz-user-select: text;" aria-invalid="false" data-errorqtip="" type="text">
</td>
<td id="ext-gen1670" class="x-trigger-cell" style="width:22px" valign="top">
<div id="ext-gen1669" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-last x-unselectable" role="button" style="-moz-user-select: none;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Tried Xpath (but it is failing to select 2nd field)
1st field xpath:
.//*[#id='ssl-inputEl']//following::div[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
.//*[#id='ssl-inputEl’]//following::div[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), ‘Yes’)]
.//*[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), 'Yes')]
.//*[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
2nd field xpath:
.//*[#id='isDiscovery-inputEl']//following::div[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
.//*[#id='isDiscovery-inputEl']//following::div[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), ‘Yes’)]
.//*[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), 'Yes')]
.//*[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
I've been reading and researching how to build a responsive email - the thing is I am building it using a table. I know tables are not responsive by nature; however, I've been reading up on responsive design, media queries, and such and I still cannot find a solution. Below is what I have so far. Any help would be greatly appreciated as I would like to learn how to make an email responsive.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Trident Email</title>
<style type="text/css">
#media (max-width: 480px){
table,tbody,tr,td,img {
display:block;
}
div#background {
width: 400px;
}
table#container{
width:300px;
}
}
</style>
</head>
<body>
<div id="background" style="background-color:#eeee00;padding:10px 0;margin:0 320px;">
<table style="margin:0px auto;border-spacing:0px;border-collapse:collapse;text-align:center;" cellpadding="0" cellspacing="0" width="600" align="center">
<tbody>
<tr>
<td>
<table id="container" style="border-spacing:0px;border-collapse:collapse;" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<img src="http://enews.trident.edu/hs-fs/hub/336281/file-2384384346-jpg/Headers_Footers/Trident_is_Coming_to_Town.jpg?t=1446144504152" width="100%" style="vertical-align:bottom;">
</td>
</tr>
<tr>
<td>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td></td>
<tr>
<td style="text-align:left;" width="65%">
<table cellpadding="5" cellspacing="10" width="100%">
<tbody>
<tr>
<td>
<div style="">
<p><span style="color: #9c800d; font-family: helvetica;text-transform:uppercase;"><strong>Date:</strong></span></p>
</div>
</td>
<td width="100%" style="text-align:left;">
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;"><strong>November 2, 2015</strong></span>
</p>
</div>
</td>
</tr>
<tr>
<td>
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;text-transform:uppercase;"><strong>time:</strong></span>
</p>
</div>
</td>
<td width="100%" style="text-align:left;">
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;"><strong>10:00AM - 2:00PM</strong></span>
</p>
</div>
</td>
</tr>
<tr>
<td>
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;text-transform:uppercase;"><strong>location:</strong></span>
</p>
</div>
</td>
<td width="100%" style="text-align:left;">
<div style="">
<p>
<span style="color: #9c800d; font-family: helvetica;line-height:1.5;"><strong>Fort Rucker Army Installation<br/>Bldg.4502, Room 303</strong></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td width="35%" style="text-align:right;">
<div>
<img src="http://enews.trident.edu/hs-fs/hub/336281/file-2668017528-jpg/images/Outreach/James_Shiver_175px.jpg?t=1446144504152" width="100%">
</div>
<p style="text-align:left;" color="#ffffff" align="left"><span style="font-family: helvetica; color: #ffffff;" color="#ffffff"><strong>James Shiver</strong></span><br/><span style="font-family: helvetica; font-size: 13px; color: #ffffff;">334-470-9146</span><br><span style="color: #ffffff;">james.shiver#trident.edu</span></p>
</td>
</tr>
</tbody>
</table>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="20"></td>
<td width="80">
<div style="border-top:2px solid #9c800d;width:98%">
<p style="color:#ffffff;text-align:center;font-family:helvetica;font-weight:bold;">
Can't stop by? Visit us Online:
</p>
</div>
</td>
<td width="20"></td>
</tr>
</tbody>
</table>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);text-align:center;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td width="20"></td>
<td>
<div>
<p style="text-align:center;color:#ffffff;font-family:helvetica;font-size:14px;">
trident.edu/james
</p>
</div>
</td>
<td width="">
<div>
<p style="text-align:center;color:#ffffff;font-family:helvetica;font-size:14px;">
News and Events
</p>
</div>
</td>
<td>
<div>
<p style="text-align:center;color:#ffffff;font-family:helvetica;font-size:14px;">
University Blog
</p>
</div>
</td>
<td width="20"></td>
</tr>
</table>
<table style="border-spacing;0px;border-collapse:collapse;background-color:rgb(0,39,77);" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="20"></td>
<td width="60">
<div>
<p style="color:#ffffff;text-align:center;font-family:helvetica;font-weight:bold;">
Trident University<br/>1212 Plaza Dr.<br/>Cypress, CA 90630
</p>
</div>
</td>
<td width="20"></td>
</tr>
<tr>
<td width="20"></td>
<td width="60">
<div>
<img src="http://enews.trident.edu/hs-fs/hub/336281/file-2102317013-png/outreach_emblem-188px.png?t=1446144504152&width=80&name=outreach_emblem-188px.png" width="80" align="center">
</div>
</td>
<td width="20"></td>
</tr>
<tr>
<td width="20"></td>
<td width="60"><p style="color:#ffffff;font-size:13px">Unsubscribe</p></td>
<td width="20"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You need to include an !important in the media query in the <style> so that it can override the inline styles in the email body. This allows table cells to became full width and stack on small viewports.
Here is a basic example of responsive 2-column email layout using media queries:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- META Stuff -->
<!-- CSS Reset -->
<style>
/* Media Queries */
#media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
margin: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
}
</style>
</head>
<body width="100%" bgcolor="#000000" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #000000;">
<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
<!-- 2 Even Columns : BEGIN -->
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 10px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<!-- Column : BEGIN -->
<td class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
Column 1 Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</td>
</tr>
</table>
</td>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
Column 2 Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</td>
</tr>
</table>
</td>
<!-- Column : END -->
</tr>
</table>
</td>
</tr>
<!-- 2 Even Columns : END -->
</table>
</center>
</body>
Full code available here
There is a drop down with an arrow on the side which opens up a sub menu. I am not able to click on the dropdown in chrome whereas its working in ie.
I tried hover and click and actions build too. But it's not working.
The code is as follows:
<div id="navigatortab" class=" x-plain undefined sd_nav_tabpanel x-border-panel" style="left: 0px; top: 0px; width: 1600px;">
<div id="ext-gen32" class="support-servicedesk-navigator">
<table id="ext-comp-1014" class="x-btn support-servicedesk-sb support-servicedesk-sbactive caseMru x-btn-noicon" cellspacing="0" style="width: 180px; height: 26px; background-image: none; background-color: transparent;">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<tr>
<td class="x-btn-ml">
<td class="x-btn-mc">
<em id="ext-gen41" class="x-btn-split" unselectable="on">
<button id="ext-gen33" class=" x-btn-text" type="button">
<div class="mruIcon"></div>
<span>Cases</span>
</button>
</em>
</td>
<td class="x-btn-mr">
</tr>
<tr>
</tbody>
</table>
</div>
I have a Application Under Test that has a tabular structure like below:
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: White">
<tbody>
<tr>
<td id="lefthandcol" class="b24-lefthandcol" valign="top" style="width: 130px !important">
<td style="height: 400px; width: 5px">
<td style="height: 400px; width: 5px">
<td valign="top">
<div id="ctl00_ContentPlaceHolder1_MiddlePanel">
<div id="DestinationDiv"></div>
<table>
</td>
<td style="height: 400px; width: 5px">
<td style="height: 400px; width: 5px">
<td width="225" valign="top" align="right" style="background-color: White;">
</tr>
</tbody>
</table>
The question is how do I identify this table since it doesn't have id?
What is generally people do in such scenario?
You should find any unique parent-children relationship and write it with the help of CSS or Xpath:
IWebElement table = driver.FindElement(By.XPath("//table[descendant::*[#id='ctl00_ContentPlaceHolder1_MiddlePanel']]"));
So the table with descendant element with id=ctl00_ContentPlaceHolder1_MiddlePanel will be found.
If id is not available then either go with xpath or css.If you cant write them by your own then you can use tools like firebug and xpath checker..