For example,
<table width="100%">
<tr>
<td width="40"></td> // left margin
<td width="10">0</td>
<td width="%"></td>
<td width="10">3</td>
<td width="%">0</td>
<td width="10">6</td>
<td width="%">0</td>
<td width="10">9</td>
<td width="40"></td> // right margin
</tr>
</table>
I want to have the fixed number column is fixed and others is relative. I tried 25% each. but still not working.
Based on the question, this is how I would structure it. Here is a JSFiddle demonstrating the code.
CSS:
table {
width: 100%;
}
td.fixed {
position: fixed;
width: 40%;
}
td.others {
padding: 0 10px;
width: 10%;
}
HTML:
<table>
<tr>
<td class="fixed"></td>
<td class="others">0</td>
<td class="others">3</td>
<td class="others">6</td>
<td class="others">9</td>
<td class="fixed"></td>
</tr>
</table>
Related
<table id="layouttable">
<tr>
<td class='col1'>1</td>
<td class='col2'>2</td>
<td class='col3'>3</td>
</tr>
<tr>
<td class='col4'>4</td>
<td class='col5'>5</td>
<td class='col6'>6</td>
</tr>
</table>
When Mobile Size Becomes
1 4
2
5
3
6
I want to list them in the order above.
flex - order was not available because of tr.
Does anyone know of a really simple solution like this?
A quick and very dirty solution:
#media only screen and (max-width: 600px) {
.desktop-table
{
display: none;
}
}
#media only screen and (min-width: 601px) {
.mobile-table
{
display: none;
}
}
<table id="layouttable" class="desktop-table">
<tr>
<td class='col1'>1</td>
<td class='col2'>2</td>
<td class='col3'>3</td>
</tr>
<tr>
<td class='col4'>4</td>
<td class='col5'>5</td>
<td class='col6'>6</td>
</tr>
</table>
<table id="layouttable-mobile" class="mobile-table">
<tr><td class='col1'>1</td></tr>
<tr><td class='col4'>4</td></tr>
<tr><td class='col2'>2</td></tr>
<tr><td class='col5'>5</td></tr>
<tr><td class='col3'>3</td></tr>
<tr><td class='col6'>6</td></tr>
</table>
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 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>
I want to hide empty cells in table. Here is my code:
$(function() {
$(".empty").each(hideCellIfEmpty);
});
function hideCellIfEmpty() {
var theCell = $(this);
if (theCell.html().length == 0) {
hideSoft(theCell);
}
}
function hideSoft(jQElement) {
jqElement.css('visibility', 'hidden');
}
table.empty {
width: 350px;
border-collapse: collapse;
empty-cells: hide;
}
td.empty {
border-style: solid;
border-width: 1px;
border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
</tr>
</table>
You can see, empty cell is shown in 2nd row. But I want to hide it. Moreover, I don't want to use border-collapse:separate. Is this possible to hide the empty cell using border-collapse:collapse? I also want to know why this is showing empty cells.
P.S. Using border-collapse: separate is working and does not show empty cells.
$(function() {
$(".empty").each(hideCellIfEmpty);
});
function hideCellIfEmpty() {
var theCell = $(this);
if (theCell.html().length == 0) {
hideSoft(theCell);
}
}
function hideSoft(jQElement) {
jqElement.css('visibility', 'hidden');
}
table.empty {
width: 350px;
border-collapse: separate;
empty-cells: hide;
}
td.empty {
border-style: solid;
border-width: 1px;
border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
<th>Title three</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
<td class="empty">value</td>
</tr>
</table>
But this does not answer these questions:
Why empty-cells are displayed when border-collapse: collapse is used ?
Why empty cell are not displayed when border-collapse: separate is used ?
If your site doesn't require support for IE 8 and under, you could just use the CSS :empty pseudo-class:
td:empty {
visibility: hidden;
}
table.empty {
width: 350px;
border-collapse: collapse;
empty-cells: hide;
}
td.empty {
border-style: solid;
border-width: 1px;
border-color: blue;
}
td:empty {
visibility: hidden;
}
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
</tr>
</table>
More about the :empty pseudo-class can be found at https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
Assuming all cell you want to hide have the class ´.empty()´ I came up with this piece of jQuery:
$(function(){
$(".empty").each(hideCellIfEmpty);
});
function hideCellIfEmpty(){
var theCell = $(this);
if(theCell.html().length == 0){
theCell.hide();
}
}
aaaaand... it seems to work. :)
However as hide() doesn't preserve space you run into this problem if you try to do a donut shape.
Luckily there is another question discussing this problematic and the answer is to use
css('visibility','hidden')
Witch you can also find in this fiddle.
I found this solution on a good article I was reading.
I hope it will work for you too:
table {
empty-cells: hide;
}
Best regards!
Try the following
<style type="text/css">
table.empty{
width:350px;
border-collapse: collapse;
empty-cells:hide;
}
td.normal{
border-style:solid;
border-width:1px;
border-color: blue;
}
td.empty{
style:'display=none'
}
</style>
<table >
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="normal">value</td>
<td class="normal">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="normal">value</td>
<td class="empty"></td>
</tr>
</table>
Just used CSS: empty-cells: hide;
Browser supported: Verified Link or Link 2
table {
border-collapse: separate;
empty-cells: hide;
}
NB: You can't use border-collapse: collapse; because it make Disable look empty cell hide
/******Call-Padding**********/
table {
/***
border-collapse: collapse; #Not use it ***/
border-collapse: separate;
empty-cells: hide;
}
td {
border: 1px solid red;
padding: 10px;
}
<table>
<tr>
<th>Head1 </th>
<th>Head2 </th>
<th>Head3 </th>
<th>Head4 </th>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td></td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td></td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td></td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
</table>
Here's another sollution, since td:empty didn't work for me:
<style type="text/css">
table {
border-spacing: 0px; // removes spaces between empty cells
border: 1px solid black;
}
tr, td {
border-style: none; // see note below
padding: 0px; // removes spaces between empty cells
line-height: 2em; // give the text some space inside its cell
height: 0px; // set the size of empty cells to 0
}
</style>
The given code will completely remove any space an empty row would otherwise take up.
Unfortunately you have to set border-style: none;, else the borders of empty cells will be painted anyway (which results in thick lines).
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..