I'm facing an issue with multiple HTML tables on a single page, each following this structure:
H2 Header
Table
H2 Header
Table
H2 Header
Table
My requirement is to have all tables occupy 100% width, with columns set at widths of 50%, 30%, and 20%. I've applied the same CSS to each table for defining column widths. The tables are utilizing Twitter Bootstrap 3.0.0 from NuGet, with table and table-hover being Bootstrap classes.
However, upon loading the page, each table ends up with varying widths. This inconsistency persists despite having a CSS style in bootstrap.css specifying .table { width: 100% }. It seems that rather than applying the CSS rule, the table width is being determined by the content within its columns.
Am I overlooking something obvious here or making a mistake? Do I need to explicitly define the tables as 100% wide?
CSS
.columnA {
width: 50%;
}
.columnB {
width: 30%;
}
.columnC {
width: 20%;
}
HTML
<!-- Repeated across several instances -->
<h2>Header</h2>
<table class="table table-hover">
<colgroup>
<col class="columnA" />
<col class="columnB" />
<col class="columnC" />
</colgroup>
<thead>
<tr>
<th>Title</th>
<th>Address</th>
<th>Description</th>
<tr>
<!-- Additional rows -->
</thead>
<tbody>
<tr>
<td>Site Title</td>
<td>http://web-address.url</td>
<td>A description of the site</td>
<tr>
</tbody>
</table>