布局=固定时无法更改列宽和边距

mustafa00

我尝试在特定列上设置列宽，但是它不起作用。我的桌子是layout=fixed和width=100%。我设置max-width=300px了其中一列，但没有任何变化，所有列均匀地分布在一个表中。我的表格无法响应以固定列宽。

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>

添加style="max-width: 300px"到<th>也无济于事。还ml-3和mr-3工作不好，我已经添加上只剩保证金。此外，水平滚动条出现在表格的底部。

它是这样的：

谢尔盖·库兹涅佐夫

该max-width属性仅适用于块元素，因此您需要应用它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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。