I am having trouble setting the column width for a specific column in my table. The table has a layout=fixed and width=100%. I tried setting max-width=300px for one of the columns, but it seems like all columns are evenly distributed within the table. Unfortunately, my table is not responsive enough to fix the column width issue.
CSS:
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
HTML:
<div class="container-fluid">
<table class="table table-hover ml-3 mr-3">
<tr class="headers bg-primary text-white headers">
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Account)
</th>
<th>
@Html.DisplayNameFor(model => model.Day)
</th>
</tr>
<tbody id="myTable" class="align-middle">
<tr>
<td style="word-wrap: break-word; white-space:normal">
@Html.DisplayFor(modelItem => item.Name)
</td>
<td style="max-width: 300px"> <!-- here I set column width -->
@Html.DisplayFor(modelItem => item.Account)
</td>
<td>
@Html.DisplayFor(modelItem => item.Day)
</td>
</tr>
</tbody>
</table>
</div>
Even adding
style="max-width: 300px"<th> did not resolve the issue.
Furthermore, the classes ml-3 and mr-3 seem to only apply margin on the left side. Additionally, a horizontal scroll bar appears at the bottom of the table.
This is the current appearance of the table: