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/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.1/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/bootstrap-table@1.21.1/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js">
</script>
<script>
$(document).ready(function() {
$('table').bootstrapTable();
});
</script>
</body>
</html>
No comments:
Post a Comment