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;
}
Related
I'm using a Vuetify table with multiple columns like so
Reproduction link
<v-table>
<thead>
<tr>
<th v-for="index in 10">Header {{ index }}</th>
</tr>
</thead>
<tbody>
<tr v-for="rowIndex in 10">
<td v-for="columnIndex in 10">
<v-card>
<v-card-title>Cell in row {{ rowIndex }} in column {{ columnIndex }}</v-card-title>
</v-card>
</td>
</tr>
</tbody>
</v-table>
For smaller screen sizes the horizontal scrollbar is perfectly fine. But there is a "print mode" where horizontal scrollbars make no sense ( data loss on PDF file ). So regardless of the actual table width I would like to prevent a horizontal scrollbar ( I'm aware that this might look very ugly ). I think this problem is not related to Vuetify, I think this also applies for plain HTML.
I tried to disable the horizontal scrollbar via overflow-x: hidden;
div {
overflow-x: hidden;
}
td {
padding: 20px;
background: red;
}
<div>
<table>
<thead>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
</thead>
<tbody>
<tr>
<td>I'm a cell in row 1 in column 1</td>
<td>I'm a cell in row 1 in column 2</td>
<td>I'm a cell in row 1 in column 3</td>
<td>I'm a cell in row 1 in column 4</td>
<td>I'm a cell in row 1 in column 5</td>
<td>I'm a cell in row 1 in column 6</td>
<td>I'm a cell in row 1 in column 7</td>
<td>I'm a cell in row 1 in column 8</td>
<td>I'm a cell in row 1 in column 9</td>
<td>I'm a cell in row 1 in column 10</td>
</tr>
</tbody>
</table>
</div>
but unfortunately that didn't help. As you can see there is some content loss on the right side.
Do you have any ideas how to tell the content to shrink as much as possible?
you need to apply css rules differently for print screen
#media print {
body {
overflow-x: visible
}
}
here body is the first parent element of table, you can apply it to the immediate parent of table and it will work in print mode.
overflow-x: visible property will print it adjusting the data in new line in print screen
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 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 a table that has one row of tableheaders in it. The table has a height of 195px, and when it is rendered (js/jquery) the first row stretches the entire height of the table. How can I make it so the table row stays the default height? I have tried using tr:first-child to set the height statically but it isn't working.
<table class="tabled">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
<style>.tabled { height: 195px; } .tabled tr:first-child {20px; }</style>
This <tr> stretches the entirety of 195px when it is the only row in the table.
You coud set the height via CSS by applying a class to the header row
<table class="tabled">
<tr class="header">
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
<style>.tabled { height: 195px; } .header { height: 20px; }</style>
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?