Bootstrap 4 responsive table: 如何固定列宽并使 table 始终占据父元素的 100% 宽度？

Question

我正在使用 Bootstrap 4 创建响应式 table。在一页上，我有一个像这样的 2 列布局：

|-----------------|---------------|
|Table            |Image          |
|-----------------|---------------|

table 被 <div class="table-responsive"> 包裹。对于第一行中的列，特定的列宽以百分比形式给出：

<tr class="header">
    <td style="width:20%;">Column 1</td>
    <td style="width:10%;">Column 2</td>
    <td style="width:30%;">Column 3</td>
    <td style="width:30%;">Column 4</td>
    <td style="width:10%;">Column 5</td>
</tr>

此布局按预期工作：table 延伸至其父 div 宽度的 100%。但在小视口上，某些列的内容会溢出。我的 table 的列越多，情况就越糟。查看此屏幕截图：

我可以通过添加一些 CSS 来解决这个问题，如果内容太长则换行。但这不是我想要的。相反，我希望 table 列具有固定宽度，如果视口宽度太小而无法显示整个 table，则显示水平滚动条。我尝试设置 table-layout:fixed 但无济于事 - 内容仍然溢出。

我能够通过指定 table 和以像素为单位的列宽来实现所需的结果。但是 table 不会在大视口上占用其父级 div 的整个宽度。

我怎样才能得到想要的效果（我可以通过指定像素宽度来实现）但又要让 table 始终填满其父级 div 的 100%？我在 Whosebug 上检查了几个问题，但其中 none 得到了我想要的输出。

提前致谢。

Answer 1

我现在设法找到了至少适合我需要的解决方案：

<div class="table-responsive">
  <table class="w-auto mw-100">
    ...table elements...
  </table>
</div>

类 .table-responsive 和 .w-auto 是 Bootstrap 标准，而 .mw-100 是我添加的：

.mw-100 {
  min-width:100%;
}

我不知道这是否是处理我开场白中提到的问题的“正确方法”post，但至少对我来说效果很好。

Bootstrap 4 responsive table: 如何固定列宽并使 table 始终占据父元素的 100% 宽度？

Bootstrap 4 responsive table: How to fix column width and make table always take up 100 % width of parent element?

html-table

twitter-bootstrap

responsive