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

这些类在bootstrap中不存在，你只有25％，50％，75％和100％。 您需要创建：

＆＃13;

.w-20 {
  width: 20%;
}

.w-10 {
  width: 10%
}

.w-40 {
  width: 40%;
}

table {
  table-layout:fixed;/* will switch the table-layout algorythm */
}

＆＃13;

<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>

＆＃13;

见

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 {width：200px！important; }

Answer 3

要在每个浏览器中都支持，请优先使用以下命令：

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

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

3 个答案: