mHelpMe
Reputation: 6668
table body not as wide as table
I have a table where the first column remains fixed. I want the table to be vertically scrollable. I think I'm close, the below nearly does what I want, the only issue is the table rows are not as wide as the columns and I'm not sure why?
.table th:first-child,
.table td:first-child {
position: sticky;
left: 0;
background-color: #ad6c80;
color: #373737;
}
table {
height: 300px;
}
tbody {
overflow-y: scroll;
height: 200px;
width: 100%;
position: absolute;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover" data=toggle="table" data-search="true" data-show-columns="true">
<thead>
<tr>
<th scope='col' data-sortable="true">Column 1</th>
<th scope='col'>Column 2</th>
<th scope='col'>Column 3</th>
<th scope='col'>Column 4</th>
<th scope='col'>Column 5</th>
<th scope='col'>Column 6</th>
<th scope='col'>Column 7</th>
<th scope='col'>Column 8</th>
<th scope='col'>Column 9</th>
</tr>
</thead>
<tbody>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<script>
$(document).ready(function() {
$('table').bootstrapTable();
});
</script>
</body>
</html>Upvotes: 6
Views: 607
Answers (7)
Jayanika Chandrapriya
Reputation: 1153
My solution is sticky thead. In CSS what position: sticky; does is making the element relatively positioned until it reaches a certain point and then changing it to a statically positioned element. In fact, the element's position will not be fixed as you scroll down until it reaches the edge of viewport.
My solution reflects on CSS only. There are no changes have been done to your HTML code. There is no horizontal scrolling in my solution. And you will see that there is no separate vertical scrollbar for the table which could affect the neatness of output. But I have used !important; to override some Bootstrap.
There is an alternative way to make it using Bootstrap as well: Sticky Header (bootstrap-table)
Furthermore, these sources will help you to understand sticky CSS: How TO - Sticky Element (w3schools) and Creating sliding effects using sticky positioning (css-tricks)
/*Table head and cells background color and text color*/
.table th:first-child,
.table td:first-child {
background-color: #ad6c80;
color: #373737;
}
/*Sticky table head with border bottom created using box-shadow*/
thead {
position: sticky;
position: -webkit-sticky;
top: 0px;
z-index: 9999;
background: #fff;
-moz-box-shadow: 0px 0.1px 0px #dee2e6;
-webkit-box-shadow: 0 0.1px 0px #dee2e6;
box-shadow: 0px 0.1px 0px #dee2e6;
}
table{
position: relative;
}
/*Table head padding and text occupying*/
.th-inner {
padding: 7% 7%;
white-space: break-spaces;
}
.table td, .table th {
padding: .25rem !important;
}
/*Overriding Bootstrap to align titles, padding, text overflow et cetera*/
.bootstrap-table .fixed-table-container .table thead th {
align-items: center !important;
vertical-align: middle !important;
}
.bootstrap-table .fixed-table-container .table thead th .th-inner {
padding: 15% 0% !important;
vertical-align: middle !important;
overflow: unset !important;
text-overflow: unset !important;
white-space: break-spaces !important;
word-break: break-all !important;
font-size: 1.8vw !important;
}
.bootstrap-table .fixed-table-container .fixed-table-body {
overflow-x: unset !important;
overflow-y: unset !important;
}<!--No changes have been done to HTML-->
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover" data=toggle="table" data-search="true" data-show-columns="true">
<thead>
<tr>
<th scope='col' data-sortable="true">Column 1</th>
<th scope='col'>Column 2</th>
<th scope='col'>Column 3</th>
<th scope='col'>Column 4</th>
<th scope='col'>Column 5</th>
<th scope='col'>Column 6</th>
<th scope='col'>Column 7</th>
<th scope='col'>Column 8</th>
<th scope='col'>Column 9</th>
</tr>
</thead>
<tbody>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<script>
$(document).ready(function() {
$('table').bootstrapTable();
});
</script>
</body>
</html>Upvotes: 1
CryptoAlgorithm
Reputation: 1035
This is a cleaner version of the earlier answer by @Cristian. It doesn't involve using hardcoded sizing to achieve proper sizing of cells, so the table would be sized properly regardless of how wide the viewport is.
Basically, overflow: auto was set by bootstrap-table's css, which caused the table headers to stop sticking when using the method below. As a workaround, I simply moved the height: 300px to the bootstrap table container (see example code below), which allowed the headers to stick properly.
An alternative to this workaround is to set overflow: unset !important on the same container element, which would allow the table to overflow into the document. This would be fine and all, if not for the table cells horizontally overflowing, causing the whole document to scroll horizontally which IMO is super ugly.
A bonus: The first column is also sticky and remains visible as the table is horizontally scrolled.
.table {
position: relative;
border-collapse: collapse;
}
.table th {
position: sticky;
top: 0;
background-color: #fff;
z-index: 2;
}
.table tr > td:first-child, .table tr > th:first-child {
background-color: #ad6c80;
color: #373737;
/* Remove this if you would not like the first column to "stick" */
position: sticky;
left: 0;
}
.table tr > th:first-child {
z-index: 3;
}
/* This fixes the sticky headers not sticking */
.bootstrap-table .fixed-table-container .fixed-table-body {
height: 300px!important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover" data=toggle="table" data-search="true" data-show-columns="true">
<thead>
<tr>
<th scope='col' data-sortable="true">Column 1</th>
<th scope='col'>Column 2</th>
<th scope='col'>Column 3</th>
<th scope='col'>Column 4</th>
<th scope='col'>Column 5</th>
<th scope='col'>Column 6</th>
<th scope='col'>Column 7</th>
<th scope='col'>Column 8</th>
<th scope='col'>Column 9</th>
</th>
</thead>
<tbody>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
</tbody>
</table>
</div>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<script>
$(document).ready(function() {
$('table').bootstrapTable();
});
</script>
</body>
</html>Upvotes: 4
user19915328
Reputation:
There is an another easy solution. First: remove below codes
table {
height: 300px;
}
tbody {
overflow-y: scroll;
height: 200px;
width: 100%;
position: absolute;}
Add desirable height in .fixed-table-container
.fixed-table-container {
height: 400px;
}
And you are done !
If you want a sticky header too add these codes:
thead tr{
position:sticky;
top:0;
background:#fff
}
Upvotes: 0
petern0691
Reputation: 898
The code below is as about as simple as it can get I think. It supports both horizontal scrolling and vertical scrolling. It keeps the exact structure as per the OP. It only relies on one adjustment to z-index, and that is only required if both sticky column headers and sticky row headers are required for vertical and horizontal scrolling. Tested in Chrome and Firefox on windows 10.
#myTable thead tr th,
#myTable tbody tr td:first-child {
background-color: #ad6c80;
color: #373737;
}
/* Remove this if sticky column headers are not required for vertical scrolling */
#myTable thead {
position: sticky;
top: 0px;
/* Ensure first column header is not scrolled over on vertical scroll */
/* Only required if sticky row headers are also required */
z-index: 1;
}
/* Remove this if sticky row headers are not required for horizontal scrolling */
#myTable thead tr th:first-child {
position: sticky;
left: 0px;
}
/* Remove this if sticky row headers are not required for horizontal scrolling */
#myTable tbody tr td:first-child {
position: sticky;
left: 0px;
}
/* For this example, force scrolling by overiding boostrap */
.bootstrap-table .fixed-table-container .fixed-table-body {
height: 500px !important;
width: 700px !important;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
</head>
<body>
<div class="container">
<table id="myTable" class="table table-bordered table-hover" data=toggle="table" data-search="true" data-show-columns="true">
<thead>
<tr>
<th scope='col' data-sortable="true">Column 1</th>
<th scope='col'>Column 2</th>
<th scope='col'>Column 3</th>
<th scope='col'>Column 4</th>
<th scope='col'>Column 5</th>
<th scope='col'>Column 6</th>
<th scope='col'>Column 7</th>
<th scope='col'>Column 8</th>
<th scope='col'>Column 9</th>
</tr>
</thead>
<tbody>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<script>
$(document).ready(function() {
$('table').bootstrapTable();
});
</script>
</body>
</html>Upvotes: 3
Alvin
Reputation: 875
This is my approach. I put as much detail I could on the comments of the CSS.
After the general concept, I added some fixes for the default html table behaviour. Still, you can improve it by removing/adding borders, but that's the general idea how to do it.
/* This is the container*/
.fixed-table-body {
position: relative;
height: 200px !important; /* This is not required in a normal situation, now it is just to make it work the bootstrap style container */
}
/* We make table absolute to keep elements in place */
table {
position: absolute;
}
/* Make column sticky to left */
table th:first-child,
table td:first-child {
position: sticky;
left: 0;
background-color: #ad6c80;
color: #373737;
}
/* We make the headers sticky */
th {
position: sticky;
z-index: 1; /* To overlap sticky column */
background: white; /* If not will be transparent */
}
table th:first-child {
z-index: 2; /* To make 1st th element overlap its siblings */
}
/* Optional fix for default behaviour */
th {
top: -1px; /* This fixes small html alignment issue when a table element is fixed to top */
border-top: 0 !important;
border-bottom: 0 !important;
}
/* This must be the container of the th elements. define borders */
.th-inner {
border-top:1px solid #dee2e6;
border-bottom:1px solid #dee2e6;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover" data=toggle="table" data-search="true" data-show-columns="true">
<thead>
<tr>
<th scope='col' data-sortable="true">Column 1</th>
<th scope='col'>Column 2</th>
<th scope='col'>Column 3</th>
<th scope='col'>Column 4</th>
<th scope='col'>Column 5</th>
<th scope='col'>Column 6</th>
<th scope='col'>Column 7</th>
<th scope='col'>Column 8</th>
<th scope='col'>Column 9</th>
</tr>
</thead>
<tbody>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<script>
$(document).ready(function() {
$('table').bootstrapTable();
});
</script>
</body>
</html>Upvotes: 1
Cristian
Reputation: 72
I hope this solution is what you're looking for.
I basically added position style to the table, thead and tbody, used z-index to display head on top, and added default width to the first td in the first column and min-width for all th's and td's ( You should be able to change these widths as you prefer).
Let me know if you were expecting something else, it may be possible.
table {
position: relative;
height: 300px;
}
.table th:first-child,
.table td:first-child {
position: sticky;
left: 0;
background-color: #ad6c80;
color: #373737;
}
.table td:first-child {
width: 130px;
}
thead {
z-index: 10;
top: 0;
position: sticky;
background-color: white;
}
thead th {
min-width: 100px;
}
tbody {
position: absolute;
}
tbody td {
min-width: 100px;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
</head>
<body>
<div class="container">
<table class="table table-bordered table-hover" data=toggle="table" data-search="true" data-show-columns="true">
<thead>
<tr>
<th scope='col' data-sortable="true">Column 1</th>
<th scope='col'>Column 2</th>
<th scope='col'>Column 3</th>
<th scope='col'>Column 4</th>
<th scope='col'>Column 5</th>
<th scope='col'>Column 6</th>
<th scope='col'>Column 7</th>
<th scope='col'>Column 8</th>
<th scope='col'>Column 9</th>
</tr>
</thead>
<body>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail A</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
<tr>
<td>Conf</td>
<td>even 20 trail B</td>
<td>True</td>
<td>False</td>
<td>0</td>
<td>True</td>
<td>True</td>
<td>True</td>
<td>True</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<script>
$(document).ready(function() {
$('table').bootstrapTable();
});
</script>
</body>
</html>Upvotes: 2
R-b-n
Reputation: 513
https://jsfiddle.net/kaxt5wpb/4/
I simply removed:
tbody{
overflow-y: scroll;
height: 200px;
width: 100%;
position: absolute;
}
Upvotes: -4
Related Questions
- Child table not taking full width of parent table
- Table body width is not fit with table header
- Why doesn't the body become the width I specify?
- Table body column not same width as the Header column
- Table is too wide
- HTML table exceeds browser's width
- Table Not Exceeding Window Width
- TABLE wider than containing DIV
- CSS: Table head looks smaller than table body
- How do I make my table body width equal to the table width in HTML?