If i define a <thead> like this:
<thead>
<tr>
<th colspan=3>Category 1</th>
<th colspan=2>Category 2</th>
</tr>
<tr>
<th>Sub-cat 1</th>
<th>Sub-cat 2</th>
<th>Sub-cat 3</th>
<th>Sub-cat 4</th>
<th>Sub-cat 5</th>
</tr>
</thead>
Does this structure semantically separate the categories/sub-categories correctly?
I know that visually it will look good, but I am unsure how this would look to a screen reader or to W3C specs in general.
Browsers can use thead, tbody, tfooter to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, thead, tbody, tfooter elements can enable the table header and footer to be printed at the top and bottom of each page. See this for more info: http://www.w3schools.com/tags/tag_thead.asp
Related
I'm using bootstrap class .table-responsive and the table include an horizontal scrollbar sort of like this:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Column 1</th>
<th>Column ...</th>
<th>Column n</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1</td>
<td>Column ...</td>
<td>Column n</td>
</tr>
</tbody>
</table>
</div>
but i need to make the headers and the first 3 columns freeze.
I've tried some fiddle, css tricks and stuff i find, but that ruins the .table-responsive it seem that those examples only work for tables that fits in 100% browser width.
Maybe this http://getbootstrap.com/css/#grid-example-basic can solve your problem.
<thead>
<tr>
<th class="col-md-1">Column 1</th>
<th class="col-md-1">Column 2</th>
<th class="col-md-1">Column 3</th>
<th>Column ...</th>
<th>Column n</th>
</tr>
</thead>
You can do it using <div > instead of table and you can easily fix the heading and also use display:table-cell;
I have some tables like this:
<tr>
<th scope="rowgroup" rowspan="2">Rowgroup</th>
<th scope="row">Row 1</th>
<td>A</td>
</tr>
<tr>
<th scope="row">Row 2</th>
<td>B</td>
</tr>
I want a general CSS rule to catch all the scope="row" elements when part of a rowgroup but not when they aren't part of a rowgroup like this:
<tr>
<th scope="row">Row 1</th>
<td>A</td>
</tr>
<tr>
<th scope="row">Row 2</th>
<td>B</td>
</tr>
My goal is to have all my TH's one color, except when part of a rowgroup. I tried this but it only catches the first one:
th[scope="rowgroup"] th { color: blue; }
I don't care about browser compatibility and using many rules is fine, I just want to avoid using id or class selectors or javascript if possible.
I'm afraid you cannot do that with simply CSS.
The problem is that CSS does not support going "up", only going "down". In your first example, it would be impossible to reach the th located in the second tr, they are "cousins" with the th scope="rowgroup" element, so you would have to go up first and then go down.
It is easy to solve with Javascript/jQuery, or if you can add a class on the tr that contains the th scope="rowgroup" in your HTML.
Juste use as css code:
th {color:blue;}
th[scope="rowgroup"] { color: red; }
demo: http://jsfiddle.net/H4Hy9/1/
I want to print a table with double headlines on every page. On the first page it works well, but on the following pages it prints only the first headline.
css
#media print {
thead {
display: table-header-group;
}
}
Html for my table.
<tr>
<thead>
<th colspan="2">A</th>
<th>B</th>
<th>C</th>
<thead>
<th>1</th>
<th colspan="2">2</th>
<th>3</th>
</tr>
Thanks for help.
I try to add a class to the second thead and then group it in css instead of thead -> .className but it don't work. I had the same result.
Try this,
<thead>
<tr>
<th colspan="2">A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<th>1</th>
<th colspan="2">2</th>
<th>3</th>
</tr>
</thead>
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 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?