Bootstrap 自定义 Table 宽度

Question

我的问题与已有的问题有点不同。我正在尝试创建一个具有一定宽度的 table。 table 有 3 列。我希望前两列具有自动宽度，第三列填充剩余的 space.

这是我目前所拥有的，它不是很有效。列都具有相同的宽度。我试图在整个 table 上设置 width: auto !important，但是第三列没有填充剩余的 space。

.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

您可以通过为前两列指定固定宽度并从 css 中删除 table 宽度自动来尝试以下代码。

<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>

希望对您有所帮助

Answer 2

希望我明白你在这里想要什么。试试这个：

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

这将使您自动适应前两列（我添加了白色-space 以防止文本换行），第三列向上填充行。

Bootstrap 自定义 Table 宽度

Bootstrap Custom Table Widths

html

css

twitter-bootstrap

twitter-bootstrap-3