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;
Related
My question is quite simple, how do I make this table responsive using twitter bootstrap 4? Below is a JS Fiddle Link.
<div class="some-table-section">
<div class="container">
<table class="table some-table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Plan 1</th>
<th scope="col">Plan 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Option 1</th>
<td>$1</td>
<td>$2</td>
</tr>
<tr>
<th scope="row">Option 2</th>
<td>1</td>
<td>2</td>
</tr>
<tr>
<th scope="row">Option 3</th>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row"></th>
<td><a href="#" class="btn btn-primary">Select this plan</td>
<td><a href="#" class="btn btn-primary">Select this plan</td>
</tr>
</tbody>
</table>
</div>
</div>
What I would like to have is a responsive version of this table such that plan 2 is below plan 1 in the responsive version. PS. You can find the current CSS in the JS Fiddle Link.
You should check Bootstrap Docs: https://getbootstrap.com/docs/4.3/content/tables/#responsive-tables
Simply wrap your table with .table-responsive
Basic example:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
You can have breakpoint specific responsive table using class table-responsive{-sm|-md|-lg|-xl}
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
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.
I have an html table with one of the headers spanning over 2 columns. How can I add sub-headers to each of the 2 columns ?
For e.g. in the attached image, I want the 'Contact' column to have sub-headers 'Phone' and 'Address' for the respective columns.
The same way you would if you were drawing out the table on paper:
<table>
<thead>
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Email</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Phone</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<!-- your data goes here -->
</tbody>
</table>
You need to have two separate header rows:
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Email</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Number</th>
<th>Address</th>
</tr>
Add another row and put sub headers in <td /> tags. Maybe give the row a class and style the td text? That way they won't look identical to the real headers, that might cause confusion.
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th colspan="2">Title 3</th>
</tr>
<tr>
<td>content</td><td>content</td><th>subtitle 1</th><th>subtitle 2</th>
</tr>
<tr>
<td>content</td><td>content</td><td>content</td><td>content</td>
</tr>
</table>
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;
}