I've copied exactly this demo here: http://www.bootply.com/JnOYtO9xzn and I'm having issues with the CSS code. When I run it from my environment it looks like this:
However, when trying to reproduce what I'm seeing here in JSfiddle or anything else, it shows exactly how it's supposed to. Like this:
How can this be happening when the code is exactly the same?
Edit:
HTML:
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4>
Fixed Header Scrolling Table
</h4>
</div>
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-2">#</th><th class="col-xs-8">Name</th><th class="col-xs-2">Points</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-2">1</td><td class="col-xs-8">Mike Adams</td><td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">2</td><td class="col-xs-8">Holly Galivan</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td>
</tr>
<tr>
<td class="col-xs-2">4</td><td class="col-xs-8">Jim Adams</td><td>23</td>
</tr>
<tr>
<td class="col-xs-2">5</td><td class="col-xs-8">Henry Galivan</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">6</td><td class="col-xs-8">Bob Shea</td><td class="col-xs-2">26</td>
</tr>
<tr>
<td class="col-xs-2">7</td><td class="col-xs-8">Andy Parks</td><td class="col-xs-2">56</td>
</tr>
<tr>
<td class="col-xs-2">8</td><td class="col-xs-8">Bob Skelly</td><td class="col-xs-2">96</td>
</tr>
<tr>
<td class="col-xs-2">9</td><td class="col-xs-8">William Defoe</td><td class="col-xs-2">13</td>
</tr>
<tr>
<td class="col-xs-2">10</td><td class="col-xs-8">Will Tripp</td><td class="col-xs-2">16</td>
</tr>
<tr>
<td class="col-xs-2">11</td><td class="col-xs-8">Bill Champion</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">12</td><td class="col-xs-8">Lastly Jane</td><td class="col-xs-2">6</td>
</tr>
</tbody>
</table>
</div>
CSS:
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
float: left;
border-bottom-width: 0;
}
Related
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 want to create a table with a lot of data. To keep it all sorted out, I want the table to be scrollable. I use bootstrap to pimp up the table.
I know this question is asked before and the solution does work for me, but my table is a mess. See the table on the right for what it looks like. I want it to look more like the table to the left.
So what I tried is:
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Speciale tarieven buiten 's-Herogenbosch</h3>
<div class="pull-right">
<span class="clickable filter" data-toggle="tooltip" title="Klik om te zoeken"
data-container="body">
<i class="glyphicon glyphicon-search"></i>
</span>
</div>
</div>
<div class="panel-body">
<input type="text" class="form-control" id="task-table-filter" data-action="filter"
data-filters="#task-table" placeholder="Zoek naar een plaats.."/>
</div>
<table class="table table-hover table-fixed" id="task-table">
<thead>
<tr>
<th >#</th>
<th>Van</th>
<th>Naar</th>
<th>Normaal</th>
<th>Onze prijs</th>
<th>Korting</th>
</tr>
</thead>
<tbody class="alignmentp">
<tr>
<td>1</td>
<td>'s-Hertogenbosch</td>
<td>Ammerzoden</td>
<td>€ 35,00-</td>
<td>€ 24,99-</td>
<td>30 %</td>
</tr>
<tr>
<td>2</td>
//etc etc
</tr>
</tbody>
</table>
</div>
And the CSS I use with this is:
.alignmentp{
text-align: left !important;
}
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
float: left;
border-bottom-width: 0;
}
I can fix this table by manually correcting the width and height of each <"tr"> and <"td"> element, but there must be a better way of doing this..
Sounds like you are having problems with your columns not lining up. What you could do is find out how wide your widest element is (<td> or <th>) and then set all <td> and <th> elements to that width.
Another possible solution is to add the table-responsive class to your table, as defined in the Bootstrap table docs, and make the width of your <td> and <th> elements be defined by how many there are in a row. If there are five <td>s in a <tr>, set the width of the <td>s to be 20%.
Hope this fixed your problem, if not, just comment below and I'll try again.
.fixHeader{
overflow-y: auto;
}
.fixHeader th {
position: sticky;
top: 0;
background-color: #b4bab4;
}
.fixHeader table {
border-collapse: collapse;
width: 100%;
}
.fixHeader th,
.fixHeader td {
padding: 8px 16px;
}
<div class="fixHeader" style="height:200px;">
<table class="table card-border">
<thead class="tableHead">
<tr>
<th scope="col">
<label class="form-check-label">xyz</label>
</th>
<th scope="col"> abc</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of listData">
<td>
<div class="form-check">
{{item.Name}}
</div>
</td>
<td>
<label class="form-check-label">{{ item.Value }}</label>
</td>
</tr>
</tbody>
</table>
</div>
You can check this answer it was helpful for me.
In HTML you can add this:
<div class="panel panel-default">
<div class="panel-body">
<table id="myTable" class="table table-hover table-fixedheader table-bordered table-striped">
<thead>
<tr>
<th width="15%">Column1Column1Column1Column1</th>
<th width="15%">Column2</th>
<th width="15%">Column3</th>
<th width="15%">Column4</th>
<th width="40%">Column5</th>
</tr>
</thead>
<tbody style="height:110px">
<tr>
<td width="15%">aaaaaaaaaaa</td>
<td width="15%">bbbbbbbbbbb</td>
<td width="15%">ccccccccccc</td>
<td width="15%">ddddddddddd</td>
<td width="40%">eeeeeeeeeee</td>
</tr>
</tbody>
</table>
</div>
</div>
In your CSS add this link:
table.table-fixedheader {
width: 100%;
}
table.table-fixedheader, table.table-fixedheader>thead, table.table-fixedheader>tbody, table.table-fixedheader>thead>tr, table.table-fixedheader>tbody>tr, table.table-fixedheader>thead>tr>th, table.table-fixedheader>tbody>td {
display: block;
}
table.table-fixedheader>thead>tr:after, table.table-fixedheader>tbody>tr:after {
content:' ';
display: block;
visibility: hidden;
clear: both;
}
table.table-fixedheader>tbody {
overflow-y: scroll;
height: 100px;
}
table.table-fixedheader>thead {
overflow-y: scroll;
}
table.table-fixedheader>thead::-webkit-scrollbar {
background-color: inherit;
}
table.table-fixedheader>thead>tr>th:after, table.table-fixedheader>tbody>tr>td:after {
content:' ';
display: table-cell;
visibility: hidden;
clear: both;
}
table.table-fixedheader>thead tr th, table.table-fixedheader>tbody tr td {
float: left;
word-wrap:break-word;
}
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
I'm trying to create a table from the example at http://www.bootply.com/JnOYtO9xzn# and I've copied everything exact. However the css isn't applying correctly to my table and it's mashing everything together.
This is what's happening:
Here's my html:
<div class="container">
<div class="row">
<div class="panel panel-default">
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-2">#</th><th class="col-xs-8">Name</th><th class="col-xs-2">Points</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-2">1</td><td class="col-xs-8">Mike Adams</td><td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">2</td><td class="col-xs-8">Holly Galivan</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td>
</tr>
<tr>
<td class="col-xs-2">4</td><td class="col-xs-8">Jim Adams</td><td>23</td>
</tr>
<tr>
<td class="col-xs-2">5</td><td class="col-xs-8">Henry Galivan</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">6</td><td class="col-xs-8">Bob Shea</td><td class="col-xs-2">26</td>
</tr>
<tr>
<td class="col-xs-2">7</td><td class="col-xs-8">Andy Parks</td><td class="col-xs-2">56</td>
</tr>
<tr>
<td class="col-xs-2">8</td><td class="col-xs-8">Bob Skelly</td><td class="col-xs-2">96</td>
</tr>
<tr>
<td class="col-xs-2">9</td><td class="col-xs-8">William Defoe</td><td class="col-xs-2">13</td>
</tr>
<tr>
<td class="col-xs-2">10</td><td class="col-xs-8">Will Tripp</td><td class="col-xs-2">16</td>
</tr>
<tr>
<td class="col-xs-2">11</td><td class="col-xs-8">Bill Champion</td><td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">12</td><td class="col-xs-8">Lastly Jane</td><td class="col-xs-2">6</td>
</tr>
</tbody>
</table>
</div>
And the CSS:
.table-fixed thead {
width: 100%;
}
.table-fixed tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
float: left;
border-bottom-width: 0;
}
How can I change the color of the table from gray to black? I already tried background-color: green but but it wont affect the heading background of the table.
<style type="text/css">
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-y: scroll;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
float: left;
border-bottom-
width: 0;
}
</style>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4>
Fixed Header Scrolling Table
</h4>
</div>
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-2">#</th>
<th class="col-xs-8">Name</th>
<th class="col-xs-2">Points</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-2">1</td>
<td class="col-xs-8">Mike Adams</td>
<td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">2</td>
<td class="col-xs-8">Holly Galivan</td>
<td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">3</td>
<td class="col-xs-8">Mary Shea</td>
<td class="col-xs-2">86</td>
</tr>
<tr>
<td class="col-xs-2">4</td>
<td class="col-xs-8">Jim Adams</td>
<td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">5</td>
<td class="col-xs-8">Henry Galivan</td>
<td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">5</td>
<td class="col-xs-8">Henry Galivan</td>
<td class="col-xs-2">44</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Setting the background against just the .table-fixed class works fine:
.table-fixed {
background-color: green;
}
I think you may have been setting it for just the tbody element, if the header wasn't being affected.
To set the entire panel's background colour, you could try setting a new class on the panel DIV, and then set the colour of this in css.
<style>
.panel-green { background-color: green; }
</style>
<div class="panel panel-default panel-green">
....
</div>
Or explicitly set the background on the panel:
<div class="panel panel-default" style="background-color: green">
....
</div>
I modified the table header color,table header text color, table background color.
I add some css code in your code.I commented that code
.table{
background-color: green;/* done by me */
}
.table-fixed thead {
width: 97%;
background-color: red;/* done by me */
color: white;/* done by me */
}
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-y: scroll;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
/ display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
float: left;
border-bottom-
width: 0;
}
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4>
Fixed Header Scrolling Table
</h4>
</div>
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-2">#</th>
<th class="col-xs-8">Name</th>
<th class="col-xs-2">Points</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-2">1</td>
<td class="col-xs-8">Mike Adams</td>
<td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">2</td>
<td class="col-xs-8">Holly Galivan</td>
<td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">3</td>
<td class="col-xs-8">Mary Shea</td>
<td class="col-xs-2">86</td>
</tr>
<tr>
<td class="col-xs-2">4</td>
<td class="col-xs-8">Jim Adams</td>
<td class="col-xs-2">23</td>
</tr>
<tr>
<td class="col-xs-2">5</td>
<td class="col-xs-8">Henry Galivan</td>
<td class="col-xs-2">44</td>
</tr>
<tr>
<td class="col-xs-2">5</td>
<td class="col-xs-8">Henry Galivan</td>
<td class="col-xs-2">44</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
You can simply try:
edit: overlooked th elements
table thead th{
background:green;
}
Here is fiddle demo
You can use
.table header{
background-color:green;
}