是否可以使 table 的前两列与其内容一样宽，而第三列占据剩余的 space？

Question

仍然无法制作合适的聊天框；/

我的要求很简单：第一列是时间戳，第二列是发帖人的昵称，最后一列是消息内容。因此：前两列应尽可能多地使用 space 以避免换行，但不要多于避免浪费 space；而第 3 列应该占用剩余的 space，但不会更多，必要时强制换行。

但是，table 布局 - auto 和 fixed - 都失败了。

table-layout: auto; 会在前两列换行，如果输入单个大字作为消息内容，尽管 overflow-wrap: break-word:[=22= 也会异常拉伸 table ]

.chatbox {
  display: table;
}

.message {
  display: table-row;
}

.timestamp, .author, .content {
  display: table-cell;
  padding-right: 10px;
}

.content {
  overflow-wrap: break-word;
}

<ul class="chatbox">
  <li class="message">
    <span class="timestamp">9.07.2019, 17:22:50</span>
    <span class="author">Some Longer Nick</span>
    <span class="content">I can see linebreaks in the preceeding two columns and I'd like to avoid them.</span>
  </li>
  <li class="message">
    <span class="timestamp">9.07.2019, 17:27:41</span>
    <span class="author">Nick</span>
    <span class="content">AnAbsurdlyLongWordThatCompletelyAndUtterlyDisruptsTheLayoutOfMyChatbox</span>
  </li>
</ul>

table-layout: fixed; 不允许我根据内容将前两列设置为宽度：

body {
  width: 500px;
}

.chatbox {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.message {
  display: table-row;
}

.timestamp, .author, .content {
  display: table-cell;
  padding-right: 10px;
}

.content {
  overflow-wrap: break-word;
}

<ul class="chatbox">
  <li class="message">
    <span class="timestamp">9.07.2019, 17:22:50</span>
    <span class="author">Nick1</span>
    <span class="content">Too much blank space surrounding the timestamp and authors' nicks do not leave enough space for message contents</span>
  </li>
  <li class="message">
    <span class="timestamp">9.07.2019, 17:27:41</span>
    <span class="author">Nick2</span>
    <span class="content">To some extend I could remedy this by explicitely setting column widths, however, this would obviously not adapt to varying lengths of nicks. Only short nicks talking would again waste space while longer nicks could break</span>
  </li>
</ul>

是否可以使用 display: table 做我想做的事？

Answer 1

先考虑white-space: nowrap;你的解决方案

.chatbox {
  display: table;
}

.message {
  display: table-row;
}

.timestamp, .author, .content {
  display: table-cell;
  padding-right: 10px;
}

.timestamp, .author {
    white-space: nowrap;
}
.content {
  overflow-wrap: break-word;
  word-break:break-word;
}

<ul class="chatbox">
  <li class="message">
    <span class="timestamp">9.07.2019, 17:22:50</span>
    <span class="author">Some Longer Nick</span>
    <span class="content">I can see linebreaks in the preceeding two columns and I'd like to avoid them.</span>
  </li>
  <li class="message">
    <span class="timestamp">9.07.2019, 17:27:41</span>
    <span class="author">Nick</span>
    <span class="content">AnAbsurdlyLongWordThatCompletelyAndUtterlyDisruptsTheLayoutOfMyChatbox</span>
  </li>
</ul>

是否可以使 table 的前两列与其内容一样宽，而第三列占据剩余的 space？

Is it possible to make the first two columns of a table as wide as their content with the third column occupying the remaining space?

css

html-table

width

column-width