Question

我的问题与已经存在的问题略有不同。我正在尝试创建一个具有一定宽度的表。该表有3列。我希望前两列具有自动宽度，第三列填充剩余空间。

这是我到目前为止所做的，它并不是很有效。列都具有相等的宽度。我试图在整个表格上设置width: auto !important，但第三列没有填充剩余空间。

.message-timestamp {
    width: auto !important;
}
.message-nick {
      width: auto !important;
}

<table class="table table-hover" style="float:left; width:74%">
  <tr>
    <td class="message-timestamp">2015-02-03 11:15:16</td>
    <td class="message-nick">ResidentBiscuit</td>
    <td class="message-text">This is just a message</td>
  </tr>
  <tr>
    <td class="message-timestamp">2015-02-03 11:16:35</td>
    <td class="message-nick">SomeNick</td>
    <td class="message-text">I'm replying to ResidentBiscuit</td>
  </tr>
</table>

这是Bootply。

Answer 1

希望我能理解你想要的东西。试试这个：

.message-timestamp {
    width: auto;
    white-space: nowrap;
}
.message-nick {
    width: auto;
    white-space: nowrap;
}
.message-text {
    width: 100%;
}

这将使您自动适应前两列（并且我添加了空格以防止文本换行），第三列填充了该行。

Answer 2

您可以通过为前两列提供固定宽度并从css中删除表格宽度来尝试以下代码。

<table class="table table-hover" style="float:left; width:100%">
<tbody>
<tr>
<td class="message-timestamp" style="width:10%">2015-02-03 11:15:16</td>
<td class="message-nick" style="width:10%">ResidentBiscuit</td>
<td class="message-text">This is just a message</td>
</tr>
<tr>
<td class="message-timestamp">2015-02-03 11:16:35</td>
<td class="message-nick">SomeNick</td>
<td class="message-text">I'm replying to ResidentBiscuit</td>
</tr>
</tbody></table>

希望这有帮助

Bootstrap自定义表格宽度

2 个答案: