每列Bootstrap 4响应表宽度具有特定宽度

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/

浆纱

使用width和height实用程序，可以轻松地使元素的宽度或高度（相对于其父元素）相同。包括默认情况下对25％，50％，75％和100％的支持。

和

https://www.w3.org/wiki/CSS/Properties/table-layout

table-layout

该table-layout属性控制用于布置表格单元格，行和列的算法。