Can't change column width and margin when layout=fixed

user_14676485 0
Viewed 165

I try to set column width ona particular column but it doesn't work. My table is layout=fixed and width=100%. I set max-width=300px for one of the columns but nothing changes, all columns are distributed evenly in a table. My table is not responsive as to fix column width.

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>

Adding style="max-width: 300px" to <th> also doesn't help. Also ml-3 and mr-3 works bad, I have only margin added on left. Additionally horizontal scroll bar appears at the bottom of a table.

this is how it looks like:

enter image description here

bootstrap-4 css html
1 Answers

The max-width property only applies to block elements, so you need to apply it display: block:

<td style="max-width: 300px; display: block; margin: auto;">
 XYZ
</td>


table {
        table-layout: fixed;
        border-collapse: collapse;
        width: 100%;
    }
    
    tbody > tr > td {
    vertical-align: middle;
    text-align: center;

}
<div class="container-fluid">
   <table class="table table-hover ml-3 mr-3">
      <tr class="headers bg-primary text-white headers">
         <th>
             Name
         </th>
         <th>
             Account
         </th>
         <th>
             Day
         </th>
      </tr>

   <tbody id="myTable" class="align-middle">

      <tr>
         <td style="word-wrap: break-word; white-space:normal">
             XYZ
         </td>
         <td style="max-width: 300px; display: block; margin: auto;"> <!-- here I set column width  -->
             XYZ
         </td>
         <td>
             XYZ
         </td>
      </tr>

    </tbody>
   </table>
</div>

user_135734440
Related