Is there a way to make the header of a Bootstrap table fixed when scrolling, while also adjusting the width of each column based on the content within it? I want the column headers to match the width of the row with the most text. Setting the position of the header to fixed currently prevents the width from changing based on content.
I am looking for a solution that allows the column widths to be dynamically adjusted according to the longest value in that specific column, whether it's a header title or cell content. Ideally, this calculation would be applied to the header column width automatically without manually setting fixed values per column.
Here is my attempt using Angular and a jsfiddle link to demonstrate the issue: JsFiddle. The columns are not aligned properly due to fixed positioning of the header rows.
HTML code:
<div class="col-md-12 tableDiv" >
<table class="table table-striped" >
<thead class="table-bordered">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
<th>Column6</th>
</tr>
</thead>
<tbody >
<tr>
<td > FIRST</td>
<td >asdasdfasf</td>
<td >fsdf</td>
<td>sdfsfd</td>
<td>sdfs</td>
<td>fsdfsdf</td>
</tr>
<tr>
<td > asdf</td>
<td >asdfa</td>
<td >fsdf</td>
<td>sdfsfd</td>
<td>sdfs</td>
<td>fsdfsdf</td>
</tr>
<tr>
<td > asdf</td>
<td >asdfa</td>
<td >fsdf</td>
<td>sdfsfd</td>
<td>sdfs</td>
<td>fsdfsdf</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
CSS:
.table-bordered tr {
position: fixed;
z-index:1;
top: 50px;
background: #fff;
}