Bootstrap 4中的表列大小不同答案

【问题标题】：Table columns not of equal size in Bootstrap 4Bootstrap 4中的表列大小不同
【发布时间】：2019-01-16 13:27:53
【问题描述】：

我正在将一个项目迁移到 Bootstrap 4。在以前的 Bootstrap 3 版本中，所有三列的宽度都相同。在 Bootstrap 4 中，第一列非常宽，而其他两列在最右侧挤在一起。

以前是怎样的：

现在怎么样了：

正如您在第二张图片中看到的问题，第一列占用了太多空间，我需要所有三列的大小相同。 html 看起来像这样：

<table id="mDataTable" data-cols-num="6" class="table" aria-describedby="mDataTable_info">
  <thead>
    <tr class="search-cols" style="display: none;" role="row"></tr>
    <tr role="row">
      <td class="header-action-row" style="border:none; cursor:default;" colspan="11">
        <h5 class='datatable-title'><span class='fa fa-list'></span>&nbsp; @SharedResources.Index.ListOfBradenScale</h5>
        <div class="action-images pull-right">
          <div class="add-img fa fa-plus-circle" style="cursor:pointer;" title="@SharedResources.Index.Add" data-bind="click: mainDataAdd"></div>
        </div>
      </td>
    </tr>
    <tr>
      <th data-bind="click: function () {mainDataRefreshData(1,1)}, css: mainDataUserNameIcon">@SharedResources.Index.Employee</th>
      <th data-bind="click: function () {mainDataRefreshData(1,2)}, css: mainDataDateAndTimeIcon">@SharedResources.Index.Date</th>
      <th data-bind="click: function () {mainDataRefreshData(1,3)}, css: mainDataCalculateIcon">@SharedResources.Index.Risk</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tr data-bind="visible: mainData() == null || mainData().length < 1">
    <td data-bind="attr: { 'colspan': 5 }">
      <div class="alert alert-warning" role="alert"> @SharedResources.Index.NoData</div>
    </td>
  </tr>
  <tbody data-bind="foreach: mainData">
    <tr style="cursor:pointer;" data-bind="click :$parent.mainDataSelectRow.bind($data,$index()),
                        css: { 'row-selected': $parent.mainDataSelectedRowPosition() != null && $index() == $parent.mainDataSelectedRowPosition(), 'for-delete': ForDelete() == true  }">
      <td class="col-4" data-bind="text: UserName, click: $root.mainDataDetails, attr : {'disabled' : ForDelete} "> </td>
      <td class="col-4" data-bind="text: DateAndTime, click: $root.mainDataDetails, attr : {'disabled' : ForDelete}  "></td>
      <td class="col-4" data-bind="text: CalculateRisk, click: $root.mainDataDetails, attr : {'disabled' : ForDelete}  "></td>
      <td class="action-column">
        <div class="row-delete fa fa-copy icon-blue" title="@SharedResources.Index.CopyIntoNewEntry" data-bind="click: $parent.copyIntoNew, visible: ForDelete() == false"></div>
      </td>
      <td class="action-column">
        <div class="row-delete fa fa-share icon-flip" title="@SharedResources.Index.Undo" style="color: #096224; cursor: pointer;" data-bind="click: $parent.mainDataUndoRemove, visible: ForDelete() == true"></div>
        <div class="row-delete fa fa-minus-circle icon-delete" title="@SharedResources.Index.Delete" data-bind="click: CanDelete()? $parent.mainDataRemove: null, visible: ForDelete() == false, css:{'icon-disabled': CanDelete() == false}"></div>
      </td>
    </tr>
  </tbody>
</table>

【问题讨论】：

标签： html layout html-table bootstrap-4

【解决方案1】：

尝试从代码中删除 class="col-4"。

【讨论】：

试过了，但我明白了：prntscr.com/kgielp 编辑：我忘了删除一个，现在可以了！

【解决方案2】：

将row 类添加到tr。由于row 类包含display:flex;，它的flex-items 按预期呈现。

更新：将 mx-0 添加到行类并将这些图标包装在最后一个 <td class="col-4"> 本身中

如果您不希望 td 出现在网格列中，并且希望使整个表格具有响应性，则从 td 中删除 col-4 并从 tr 中删除 row mx-0。将表格包装在 @987654332 中@

【讨论】：