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属性控制用于布置表格单元格、行和列的算法。

Answer 2

当您想要固定宽度时使用自定义类。

使用类

.w-20{ 宽度: 200px !important; }

Answer 3

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

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