Question

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<html>

<body>
  
  <!-- first table -->
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Really Lone Name</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Name</td>
        <td>50</td>
      </tr>
    </tbody>
  </table>
  
  <!-- second table -->
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Name1</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Name2</td>
        <td>50</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

＆＃13;

正如你所看到的，第一列占用的空间比第二列多，因为它包含一个更长的字符串，即使所有字符串都可以很容易地放入相等宽度的表中。

有没有办法强制列宽度相同？

Answer 1

我认为你正在寻找这个：

只需将table-layout:fixed !important;添加到 CSS

中的table即可

<强>段

table
{
  table-layout:fixed;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<html>

<body>
  
  <!-- first table -->
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Dummy</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Really Lone Name</td>
        <td>25</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Name</td>
        <td>50</td>
        <td>50</td>
      </tr>
    </tbody>
  </table>
  
  <!-- second table -->
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Name1</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Name2</td>
        <td>50</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

已更新：再向第一个表添加一列。

注意：我知道您可能知道这一点但是，我在这里已将此属性直接应用于table（仅用于演示），我建议您不要直接应用属性table，如果使用相同css file的所有表格完成更改。而是为该表提供类并将属性应用于该类。

Bootstrap Table使perpotialalwidth的宽度达到细胞含量

1 个答案: