Question

我有一个如下的引导表：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
    </tr>
  </thead>
  <tbody>  
    <tr>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>

两列的间距相等，但是如果我将一个<input>元素放入其中一列，则该列会拉伸占整个表的3/4左右。

http://www.bootply.com/115049

我的问题是为什么要这样做以及如何控制它？

任何帮助都非常感激。

Answer 1

这取决于HTML表的工作方式。默认情况下，表格单元格将根据其内容进行缩放 - 您提供的任何大小都将用作指南。所以，例如：

td {
    width: 50%; 
    /* 
       If this cell is empty, it will take up half of 
       the table. But if the content needs to, it will 
       expand to take up more space. 
    */
}

您可以通过在CSS中设置table-layout: fixed;来解决此问题：例如

table.fixed {
    table-layout: fixed;
}

这使得表格更严格地遵循您在CSS中设置的尺寸，而不是内容所指示的尺寸。有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout。

完成此操作后，您可以应用常规Bootstrap grid classes来控制宽度。将它们应用到第一行中的单元格（td或th），它们将一直重复。

Answer 2

<table class="table table-bordered">
<thead>
<tr>
  <th class="col-md-10">Col1</th>
  <th class="col-md-2">Col2</th>
</tr>
</thead>
<tbody>  
<tr>
  <td>test</td>
  <td>test</td>
</tr>
</tbody>
</table>

Answer 3

为什么？我不知道:)）

如何控制它？您可以简单地将宽度参数添加到td，例如：

<td width=50%><input type="text"></td>

你可以这样做，或者使用你的css文件，说这个类中的所有内容都应占用表宽的一半。

td {
    width: 50%;
}

Bootstrap 3表格列宽控制

3 个答案: