我如何使 html 表没有动态列，这些列的宽度会根据数据量而改变<td>

Question

我正在尝试创建一个具有相同大小列的表，这些列不会根据表数据的长度而改变

在图片中，与“Titel”较短的其他表格相比，“Titel”标题下的数据将第二列向右移动。 这种行为是不想要的，但它似乎是默认的。

我尝试填充第一列，但它根本没有改变行为。 我怎样才能获得不会将其他列推开的固定大小？

这是一个示例代码，它给出了不需要的行为

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 5px;
}
table {
  border-spacing: 15px;
}

    </style>
    </head>
    <body>
    
    <h2>Border Spacing</h2>
    <p>Border spacing specifies the space between the cells.</p>
    
    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </table>
    
    </body>
    </html>

我尝试在表格及其列上设置宽度，并填充表格，但它不起作用。

Answer 1

使用 Bootstrap 4.0，您可以使用尺寸调整实用程序类来获取宽度：

<thead>
     <tr>
           <th class="w-25">25</th>
           <th class="w-50">50</th>
           <th class="w-25">25</th>
     </tr>
</thead>

您还可以使用d-inline-block来阻止display:flex的默认设置。

Answer 2

我通过在表格上使用 style="table-layout:fixed" 并在表格标题上使用引导列来解决它。