I have one HTML bootstrap table which is having more than 15 columns, so I enabled overflow auto and it is having both vertical and horizontal scrolling. I am trying to fix the header part but I am not able to do that just because of table width is more than 100% and I can't specify columns width over 100%. can anyone help out to resolve this issue with pure HTML and CSS, I don't want to use any library or script code
Note: I am rendering this table in Angular5
HTML
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
CSS
table {
width: 100%;
}
thead, tbody, tr, td, th { display: block; }
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
/*text-align: left;*/
}
tbody {
height: 120px;
overflow-y: auto;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
}
Here is example which is help you Example
Related
This is just taking the content width and what I need is the entire "Overlap this" row to move on top of the previous row and using the width of its predecessor. Any hint on how to solve this?
<table>
<tbody>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
</tr>
<tr style="background: azure; position: absolute; display: block, width: 100%; margin-top: -25px">
<td colspan="3">Overlap this</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>
Style the table data <td> tag, instead of the table row <tr>. Check the code below.
<table>
<tbody>
<tr style="background: azure; position: absolute; display: block;">
<td colspan="3" style="width: 150px;">Overlap this</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>
table tbody {
position: relative;
}
table tbody tr:nth-child(2) {
background: azure;
position: absolute;
display: block;
width: 100%;
margin-top: -25px;
}
<table>
<tbody>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
</tr>
<tr>
<td colspan="3">Overlap this</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>
tbody {
width: 100%;
}
tr {
width: inherit;
}
<table>
<tbody style="position:relative">
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
</tr>
<tr style="background: azure; position: absolute; display: block; top:0 ">
<td colspan="3">Overlap this</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>
In your style list you have a small mistake. Instead , you need semicolon ; after: ...display: block, <-- small bug :-) ...
<tr style="background: azure; position: absolute; display: block; width: 100%; margin-top: -25px">
.ovl {
background: azure;
position: absolute;
display: block;
width: 100%; margin-top: -25px
}
tbody {
position: relative;
}
<table>
<tbody>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value33</td>
</tr>
<tr class="ovl">
<td colspan="3" >Overlap this</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>
This is probably really easy but I'm stuck trying to remove whitespace from a table cell when reducing the width of a nested image.
Eg I want to remove the whitespace in this example
JSFiddle: https://jsfiddle.net/8qm61hny/
HTML:
<div class="qtest">
<div class="q_test">
<div class="q_top">
</div>
<div class="q_test99">
<table class="test_table">
<tbody>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name1</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name2</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
.q_p2_img {
width:60%;
}
I've tried various css display options but cannot find what I need to do this.
Don't use percentage value because percentage value will get resolved after setting the parent width since we need a reference to resolve it. In your case, you will have 60% of the parent size and 40% of whitespace.
Use pixel value instead:
.q_p2_img {
width: 200px;
}
<div class="qtest">
<div class="q_test">
<div class="q_top">
</div>
<div class="q_test99">
<table class="test_table">
<tbody>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name1</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name2</td>
</tr>
<tr>
<td class="q_p1">1st</td>
<td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
<td class="q_name">Name3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Use this minimum table css for cross-browser and responsive <table> styling
html
<div class="tbl">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 11</td>
<td>Data 12</td>
</tr>
<tr>
<td>MoreData 21</td>
<td>MoreData 22</td>
</tr>
</tbody>
</table>
</div>
css
.tbl {
width: 100%; /* table width */
box-sizing: border-box;
overflow-x: auto;
}
.tbl * {
margin: 0;
box-sizing: border-box;
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
font-size: 0; /* remove gap */
}
thead, tbody, tr {
width: inherit;
}
th, td {
vertical-align: top;
text-align: left;
white-space: normal;
font-size: 16px;
}
#media (max-width: 767.9px) {
table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
}
I am trying to create a fixed header on Bootstrap table with CSS.
CSS
table.scroll tbody, table.scroll thead {
display: block;
}
table.scroll tbody {
height: 600px;
overflow-y: auto;
overflow-x: hidden;
}
HTML
<table id="standart_list" class="table table-bordered scroll">
<thead>
<tr>
<th>Standart Kodu</th>
<th>Standart Tanımı</th>
<th>Standart(Asgari Şart)</th>
<th>Standart Durum Karşılanıyor Mu?</th>
<th>Mevcut Durum</th>
<th>Açıklama</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#7fffd4">
<td>
ADLİ TIP
</td>
</tr>
<tr>
<input type="hidden" name="brans_2882" value="2">
<td>
2.1.1
</td>
<td style="max-width: 600px">
EĞİTİCİ SAYISI
</td>
<td>
1
</td>
<td>
<select name="select_2882" id="select_2882" class="form-control">
<option value="1">Evet</option>
<option value="0" selected="">Hayır</option>
</select>
</td>
<td>
<input type="text" name="input_2882" id="input_2882" value="0" class="form-control mevcut_durum numeric" required="">
<span class="errmsg"></span>
</td>
<td>
<textarea name="text_2882" id="text_2882" class="form-control aciklama" required="">bu büyüklüğe</textarea>
</td>
</tr>
</tbody>
</table>
<tbody> looks good and scrolling works. But <thead> elements do not align with <tbody>.
How can I solve this?
Here is screen which looks as described:
Thanks!
The below works on browsers newer than IE9, to get it to work in older browsers you will need to use fixed column widths unfortunatley.
Source: Source page for my answer
table {
width: 100%;
}
thead, tbody, tr, td, th { display: block; }
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
/*text-align: left;*/
}
tbody {
height: 120px;
overflow-y: auto;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
Try removing this part:
table.scroll tbody,
table.scroll thead { display: block; }
I found the solution in a previous stackoverflow post.
Scrollable table with fixed header in bootstrap with solution fiddle in second comment.
Another solution:
How to display scroll bar onto a html table
New to programming and first time posting here as well.
I've got a bit of an issue with my bootstrap table inside a panel. I have a dropdown menu where the user can decide which columns to display. I need to be able to scroll through the table content both vertically and horizontally as more data gets added. This works fine without the scroll bar as bootstrap solves that for me. When i set my table to "display: block" my scroll bar works fine, but now the column headers don't line up nicely anymore.
Also when i add more columns to display, instead of adding to the top header row they create a second row.
Here i want it to push the content together but still allowing each column to take up as much space as they need and when the table width exceeds it's limit i want the content to scroll horizontally as well.
My problem is that my data changes depending on which data the user selects (Project id, Summary, Description etc.) so i can't set individual column.
Here is my code for the table:
http://pastebin.com/e6qLwYqx
Here is my css for the table:
http://pastebin.com/cFFj6Haw
Would very much appreciate if someone could help me solve this, I have been stuck with this for days.
use
.table{
overflow:scroll ;
}
sometime you can override your bootstrap class by using !important for any update
Reference from here.
Check this Question for other solution.
Here is the working solution
HTML
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
CSS
table {
width: 100%;
}
thead, tbody, tr, td, th { display: block; }
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
/*text-align: left;*/
}
tbody {
height: 120px;
overflow-y: auto;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
}
Link to jsfiddle
I have the following problem trying to make scrollable the tbody section of an HTML table.
So for example I have this simple HTML table:
<table border="1" class="scrollableTable">
<thead>
<tr>
<th width="14.2%">Codice RM</th>
<th width="14.2%">Autore Firma</th>
<th width="14.2%">Data Firma</th>
<th width="14.2%">Acq Riserva</th>
<th width="14.2%">Consegna Finale</th>
<th width="14.2%">Descrizione RM</th>
<th width="14.2%">Imponibile</th>
</tr>
</thead>
<tbody>
<tr class="even" id="rmRow">
<td width="14.2%">0001</td>
<td width="14.2%">bla</td>
<td width="14.2%">00000000</td>
<td width="14.2%">bla</td>
<td width="14.2%">bla</td>
<td width="14.2%">19/09</td>
<td width="14.2%">57.0</td>
</tr>
<tr class="even" id="rmRow">
<td width="14.2%">0002</td>
<td width="14.2%">bla</td>
<td width="14.2%">00000000</td>
<td width="14.2%">bla</td>
<td width="14.2%">bla</td>
<td width="14.2%">19/09</td>
<td width="14.2%">57.0</td>
</tr>
<tr class="even" id="rmRow">
<td width="14.2%">0003</td>
<td width="14.2%">bla</td>
<td width="14.2%">00000000</td>
<td width="14.2%">bla</td>
<td width="14.2%">bla</td>
<td width="14.2%">19/09</td>
<td width="14.2%">57.0</td>
</tr>
<tr class="even" id="rmRow">
<td width="14.2%">0004</td>
<td width="14.2%">bla</td>
<td width="14.2%">00000000</td>
<td width="14.2%">bla</td>
<td width="14.2%">bla</td>
<td width="14.2%">19/09</td>
<td width="14.2%">57.0</td>
</tr>
<tr class="even" id="rmRow">
<td width="14.2%">0005</td>
<td width="14.2%">bla</td>
<td width="14.2%">00000000</td>
<td width="14.2%">bla</td>
<td width="14.2%">bla</td>
<td width="14.2%">19/09</td>
<td width="14.2%">57.0</td>
</tr>
<tr class="even" id="rmRow">
<td width="14.2%">0006</td>
<td width="14.2%">bla</td>
<td width="14.2%">00000000</td>
<td width="14.2%">bla</td>
<td width="14.2%">bla</td>
<td width="14.2%">19/09</td>
<td width="14.2%">57.0</td>
</tr>
</tbody>
</table>
As you can see in the tbody section there are some rows. These rows could be many so I want that this section have a specific heightand that it is scrollable (so I can see all the rows).
So I add these CSS settings trying to do it:
First I set the tbody section as a block so I can set an height to it.
Then I set an height to the tbody section.
Finally I set the verical overflow as scroll to make scrollable my tbody section.
This is my CSS code:
tbody {
display: block;
height: 100px;
overflow-y: scroll;
}
But this is what I obtain:
JSFiddle link: http://jsfiddle.net/AndreaNobili/4v1xnwzo/2/
HTML result: http://jsfiddle.net/AndreaNobili/4v1xnwzo/2/embedded/result/
As you can see the final result is pretty horrible and the tbody columns don't match wuth the thead columns.
Why? What am I missing? How can I solve this issue?
Tnx
The cells in your tbody will only line up with the cells in the thead if it has display: table-row-group;. Thus we can't set a height on the tbody, so we have to find a workaround.
The table itself can have overflow-y: scroll;, which gives us the scrolling for the rows in tbody, but unfortunately also includes scrolling the thead. You can avoid this behaviour by fixed positioning thead. and manipulating the way its displayed a little to make it look static at the top of the table while the rest of the table scrolls.
I've updated your JSFiddle with the css below:
tbody {
margin-top: 40px;
}
table {
display: block;
height: 100px;
overflow-y: scroll;
position: relative;
margin-top: 50px;
}
thead {
background: white;
position: fixed;
top: 0;
margin-right: 25px;
display: table-row-group;
}
th, td {
width: 80px;
}