How can I ensure the header columns in my Bootstrap 3 table maintain a fixed width, regardless of the content in the regular rows? I want to avoid the messy look of content splitting onto multiple lines. Here's an example:
I'd prefer not to adjust padding for each table row individually, as I'm satisfied with the current spacing. The full table can be viewed at . Below is the HTML and custom CSS related to the table. It's worth noting that PHP generates the table content, so the length of values in each cell may vary.
<table class="table bigtable" width="100%;">
<thead>
<tr>
<th class="text-center"><i class="fa fa-list-ol"></i> RANK</th>
<th class="text-center"><i class="fa fa-info-circle"></i> NAME</th>
<th class="text-center"><i class="fa fa-server"></i> SERVER</th>
<th class="text-center">
<a href="?sort=votes" style="text-decoration:none;color:#fff;">
<i class="fa fa-thumbs-o-up"></i> VOTES <i class="fa fa-sort" style="color:#84fb88;"></i>
</a>
</th>
<th class="text-center"><i class="fa fa-dashboard"></i> STATUS</th>
<th class="text-center">
<a href="?sort=players" style="text-decoration:none;color:#fff;">
<i class="fa fa-users"></i> PLAYERS <i class="fa fa-sort" style="color:#84fb88;"></i>
</a>
</th>
</tr>
</thead>
<tbody>
CONTENT...
</tbody>
</table>
Custom.css:
.bigtable thead {
background-color: #12bbb9;
color: #fff;
font-size: 14px;
}
.bigtable thead tr th {
padding:8px 5px 8px 5px;
}