引导每个列的响应表宽度以具有特定宽度

Question

我计划创建一个表，其中一些列需要有一个固定的宽度，而不是自动调整。

我试过这种方法，但不起作用。它似乎仍然可以根据文本长度自动调整宽度。

我该怎么解决这个问题？

<div class="container">
    <table class="table table-bordered">
        <thead>
            <tr class="m-0">
                <th class="w-20">a</th>
                <th class="w-10">b</th>
                <th class="w-20">c</th>
                <th class="w-40">d</th>
                <th class="w-10">e</th>
            </tr>
        </thead>
        <tbody>
            <tr class="m-0">
                <th class="w-20">a. Width with 20</th>
                <th class="w-10">b. Smaller width column</th>
                <th class="w-20">c. Should be small but I'm adding the maximum text here just to test if w-20 is working.</th>
                <th class="w-40">d. Biggest width but not working!</th>
                <th class="w-10">e. Another small column</th>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

这些类在引导程序中不存在，只有25%、50%、75%和100%的值。您需要创建它们

​

.w-20 {
  width: 20%;
}

.w-10 {
  width: 10%
}

.w-40 {
  width: 40%;
}

table {
  table-layout:fixed;/* will switch the table-layout algorythm */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr class="m-0">
        <th class="w-20">a</th>
        <th class="w-10">b</th>
        <th class="w-20">c</th>
        <th class="w-40">d</th>
        <th class="w-10">e</th>
      </tr>
    </thead>
    <tbody>
      <tr class="m-0">
        <th class="w-20">a. Width with 20</th>
        <th class="w-10">b. Smaller width column</th>
        <th class="w-20">c. Should be small but I'm adding the maximum text here just to test if w-20 is working.</th>
        <th class="w-40">d. Biggest width but not working!</th>
        <th class="w-10">e. Another small column</th>
      </tr>
    </tbody>

  </table>
</div>

​

看见

https://v4-alpha.getbootstrap.com/utilities/sizing/ 浆料 使用我们的宽度和高度实用程序，可以轻松地使元素像宽或高(相对于其父元素)。默认情况下包括对25%、50%、75%和100%的支持。

和

https://www.w3.org/wiki/CSS/Properties/table-layout table-layout table-layout属性控制用于布局表格单元格、行和列的算法。

Answer 2

如果需要固定宽度，请使用自定义类。

使用类

W-20{宽度:200.w！重要；}

Answer 3

若要在每个浏览器中提供支持，请使用以下内容：

.w-20 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 20% !important;
  flex: 0 0 20% !important;
  max-width: 20%;
}