I have a table that uses thead and tbody. The table has border-spacing set, and in Chrome and Safari the space between the header row and the rest is doubled.
It was reported as an issue for Chrome late last year, but that's the only reference to this I can find.
Has anyone else had this, or know how to get around it?
<table style="border-spacing: 0 5px">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
It displays as expected (all rows equally spaced) in Firefox, not sure about IE.
thead th {position: relative; top: 5px;} will do it
That's not exactly "THE" solution, but you might want to take a look at here for a workaround which have worked with my specific case:
How to remove extra border spacing between TBODY elements?
Related
I have a table, where the left-most cell spans the entire height of the tbody via rowspan. The content of this cell can need more height than the rest of the table. I want the height of the rows to the right of the rowspanned cell to be evenly distributed over the height of the table.
In Firefox and IE it works as intended, but in Chrome I have whitespace above the topmost row:
As you can see in the grayed line, Chrome has unused whitespace above the gray line. This only happens when the left cell has content which needs more height than the combined height of the other cells.
Code of the table used:
<html>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">Multiline<br>text<br>longer<br>than<br>rows</td>
</tr>
<tr style="background-color:gray">
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
<tr>
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
<tr>
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
</tbody>
</table>
</body>
</html>
I tried cheating the renderer by setting the height of the first tr (which only contains the rowspanned cell) to 0px, but Chrome doesn't like a height of 0. It only reacts to the height definition, when it is at least set to 1px.
Question: Does anybody have an idea how to make Chrome behave like FF and IE?
P.S.: The idea of setting the rowspanned cell in its own line was a result of some other question here on SO by someone else in the past, which solved another problem I had back then. (By accident I didn't test this particular page in Chrome back then, so I don't have an exact memory now of which problem I solved with this back then. Sorry.)
Your rowspan cell and the top Bla cells should be in the same row. Then you only have 3 rows in the table so change to rowspan=3.
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Multiline<br>text<br>longer<br>than<br>rows<br>a<br>b</td>
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
<tr>
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
<tr>
<td>Bla</td>
<td>Bla</td>
<td>Bla</td>
</tr>
</tbody>
</table>
I have 2 tables using DataTable :
top: exact match
bottom : related
Here is what they look like right now.
As you can see that, there is no need to show the table header on the second table. I want to hide it.
I have tried using this on my CSS :
Since the class = inventory_related
.inventory_related table thead {
display:none;
}
I also tried to take off the whole :
<thead class="thin-border-bottom ">
<th>Catalog # </th>
<th>Description</th>
<th>Available Vials</th>
</thead>
This doesn't work either.
Anyone have any suggestion on how do I hide my 2nd table header ?
Thanks.
In my case, setting
.inventory_related thead {
display:none;
}
messed with column widths, while
.inventory_related thead {
visibility: collapse;
}
seems to be working.
<table>
<thead style='display:none;'>
<th>header 1</th>
<th>header 2</th>
</thead>
<tbody>
<td>row value 1</td>
<td>row value 2</td>
</tbody>
</table>
Please see the following code as an example:
.inventory_related thead {
display: none;
}
<table>
<thead>
<th>header 1</th>
<th>header 2</th>
</thead>
<tbody>
<td>row value 1</td>
<td>row value 2</td>
</tbody>
</table>
<table class='inventory_related'>
<thead>
<th>header</th>
<th>header 2</th>
</thead>
<tbody>
<td>row value 3</td>
<td>row value 4</td>
</tbody>
</table>
if the class of <table> is inventory_related then write the following css
.inventory_related thead {
display:none;
}
If you want to do it in jQuery(js) then you can simply do:
$("#datatableId").css("display", "none");
where 'datatableId' is the ID of your table or some div tag which contains the table.
From https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables
You can hide them by specifying empty-cells: hide;. Then, if a cell's
parent element has a background, it shows through the empty cell.
It works well but when set border-collapse: collapse; it doesn't.
I found Why do the CSS property border-collapse and empty-cells conflict? but the answer just hide border of empty cells and it doesn't show a background of a parent element.
In this sample if we add border-collapse to table#ok background of parent element will hide itself but it shouldn't.
http://jsfiddle.net/37m56vwb/1/
How to explain this behavior and how to fix it if possible?
UPD
<table>
<tr>
<th></th>
<th></th>
<th>Header 3</th>
</tr>
<tr>
<th></th>
<th></th>
<th>Header 3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td></td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td></td>
</tr>
</table>
<hr>
<table id="ok">
<tr>
<th></th>
<th></th>
<th>Header 3</th>
</tr>
<tr>
<th></th>
<th></th>
<th>Header 3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td></td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td></td>
</tr>
</table>
and css:
table {
background: green;
border-collapse: collapse;
border-spacing: 0;
}
table#ok { border-collapse: separate; }
th,td {
background: blue;
empty-cells: hide;
border: solid 1px black;
padding: 2px 4px;
}
th:empty, td:empty {
border: 0;
}
You can add
background:transparent;
to
th:empty, td:empty {
border: 0;
}
The reason the hidden cells don't show through is mentioned in the W3.org spec. Border-collapse ignores the fact that the th or td was hidden. Basically, by you collapsing the borders, you are causing the empty-cells:hide to be ignored -- and therefore the normal background of the th and td are being shown.
http://www.w3.org/TR/CSS2/tables.html#propdef-empty-cells
When using border-collapse, W3 Schools says: borders are collapsed into a single border when possible (border-spacing and empty-cells properties will be ignored) http://www.w3schools.com/cssref/pr_border-collapse.asp Or read the spec from W3.org here: http://w3.org/TR/CSS2/tables.html#img-tbl-empty
i have a HTML table in which i want to make 1st Row fixed while i scroll, I'm able to make fixed Header Row but i also wanted my 1st Row of my table also be stay fixed. Its been 2 days I'm trying' with no success. Anybody out there had run into this kind a problem ?
<table>
<thead>
<tr>
<th>Header 1</th><th>Header 2</th> // this i have fixed already
</tr>
</thead>
<tbody>
<tr>....</tr> // this row i want to make fixed while i scroll.
<tr>....</tr>
</tbody>
</table>
JSFiddle till now i'hv got this from net
Table can have more than one tbody elements, so you can add this fixed row to first tbody, and rest rows to the second tbody. Then is just some play with css to set it right.
Working demo: http://jsfiddle.net/sMMZ9/4/
Demo is based on this solution
You need to insert first row inside the <thead> element and apply the same css as you have applied for th element:-
<thead class="fixedHeader">
<tr class="alternateRow">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
</thead>
CSS
html > body thead.fixedHeader td {
width: 200px;
}
You can also add border as per your design.Hope it'll help you for sure.
How's this:
.scrollContent > tr:first-child{
position: fixed;
}
I have a matrix that I am showing in html table. I have my header row (th) but I am trying to see if there is such things as header column that I can style similar to header row. Right now I am using a class=odd and class=even on my TR in my Tbody so I am not sure if there is a way to have a column overwrite this row css logic.
Given this markup:
<table>
<thead>
<tr>
<th> </th>
<th>Field 1</th>
<th>Field 2</th>
</tr>
</thead>
<tbody>
<tr class="even">
<th>Row 1</th>
<td>Cell 1,1</td>
<td>Cell 2,1</td>
</tr>
<tr class="odd">
<th>Row 2</th>
<td>Cell 2,1</td>
<td>Cell 2,2</td>
</tr>
</tbody>
</table>
You could use this CSS:
thead th {
background-color: red;
}
tr.even td {
background-color: blue;
}
tr.odd td {
background-color: yellow;
}
tbody tr.odd th, tbody tr.even th {
background-color: green;
}
See this in action here.
It might seem odd but try the <col> tag, you don't see it very often but I think it's great!
<table width="100%" border="1">
<col style="background:red;" align="left" />
<col align="left" />
<col align="right" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Of course you'd want to put a class on the <col> tag as opposed to writing the style right in there.
Also I'd combine this with the other folks answers when it comes to the CSS. As for using pseudo classes for even/odd, if you want to retain compatibility with IE6 you'll need to apply the striping with JavaScript, or your application code.
you can target a column using CSS td:first-child or make the header cells th instead of td and differentiate using thead th and tbody th