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;
}
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 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
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;
}
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
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;
}