如何在 Bootstrap 表格中设置表格单元格的宽度和高度答案

【问题标题】：How to set table cell width and height in Bootstrap tables如何在 Bootstrap 表格中设置表格单元格的宽度和高度
【发布时间】：2020-10-03 00:10:18
【问题描述】：

我不明白 Bootstrap 表格单元格的宽度如何大于我通过宽度、最小宽度和最大宽度样式设置的外部样式和表格单元格内的内联样式。我设置的宽度是 150px，但实际宽度是 218.25px。

table{table-layout:fixed;}
td, th{
width:150px !important;
height:75px !important;
max-width:150px !important;
max-height:75px !important;
min-width:150px !important;
min-height:75px !important;
}

这是 JSFiddle：

https://jsfiddle.net/QK9sE0/b8on0vzj/14/

下面的截图说明了我的问题：

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 datatables

【解决方案1】：

Bootstrap 将table 设置为 100% 宽度，因此您需要覆盖它。这是我所做的：

table {
  table-layout:fixed;
  width: inherit !important;
}
td, th {
  width:150px !important;
  height:75px !important;
  max-width:150px !important;
  max-height:75px !important;
  min-width:150px !important;
  min-height:75px !important;
}

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td style="width:150px; height:75px">Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
  
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>

【讨论】：

谢谢，你的方法让我更接近 - jsfiddle.net/QK9sE0/npLe0adv/17 - 但奇怪的是，现在我似乎无法控制单元格的高度。现在设置的宽度是 150 像素，但高度是 100 像素而不是设置的 75 像素。
您希望 EVERY 框为 150px X 75px（包括 thead）吗？
是的。样式规则不应该做到这一点吗？
我已经更新了我的答案和描述，所以测试一下，让我知道它是否有效！