使每个宽度适合其内容，而不是同一列中的最长内容

Question

我有一张表，每行只有一个单元格。附加到每个单元格的单词各不相同。有些较短，有些较长，但每个单元格的宽度与最长内容的单元格宽度相同。

是否可以在css / html中使每个单元格宽度适合自己的内容而不是内容最长的单元格？

$("#chatdisplay").append("<tr bgcolor='#ccffcc'><td><b>" + arr[i].date_time_sent + "</b><br/>" + arr[i].sender + ":" + "<br>" + arr[i].message + "<br></td></tr>");

$("#chatdisplay").append("&nbsp;");

CSS

table,th,td,tr {
  padding: 20px;
  border-radius: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
}
table {
  overflow-y: scroll;
  height: 400px;
  width: 100%;
  display: block;
  background-color: #ffffff;
}

Answer 1

如果你真的想这样做 - 你可以，在display: inline-block元素上使用td，但不建议使用 而这不是这样做的方式。

您可以使用该表作为结构（即使您并不真的需要这个），您可以使用div块。

以下是所有3个选项的示例：

table,th,td,tr {
  padding: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
}
table {
  overflow-y: scroll;
  width: 100%;
  display: block;
  background-color: #ffffff;
}
#tbl1 td {
  border-radius: 20px;
  background: #ccffcc;
  display: inline-block;
}
#tbl2 div.container {
  border-radius: 20px;
  background: #ccffcc;
  display: inline-block;
  padding: 8px 20px;
}
#tbl2 tr, #tbl2 td {
  padding: 0;
}
div.blocks div.container {
  padding: 4px 20px;
}
div.blocks div.container div.content {
  border-radius: 20px;
  background: #ccffcc;
  display: inline-block;
  padding: 8px 20px;
}

td with display: inline-block:<br />
<table id="tbl1">
  <tr>
    <td>This is some content</td>
  </tr><tr>
    <td>text</td>
  </tr><tr>
    <td>This is a cell with much more content</td>
  </tr>
</table>
<br />
div's insinde td<br />
<table id="tbl2">
  <tr>
    <td>
      <div class="container">This is some content</div>
    </td>
  </tr><tr>
    <td>
      <div class="container">text</div>
    </td>
  </tr><tr>
    <td>
      <div class="container">This is a cell with much more content</div>
    </td>
  </tr>
</table>

<br />
Div's only:<br />
<div class="blocks">
  <div class="container">
    <div class="content">This is some content</div>
  </div>
  <div class="container">
    <div class="content">text</div>
  </div>
  <div class="container">
    <div class="content">This is a cell with much more contentThis is a cell with much more contentThis is a cell with much more contentThis is a cell with much more contentThis is a cell with much more contentThis is a cell with much more contentThis is a cell with much more contentThis is a cell with much more contentThis is a cell with much more content</div>
  </div>
</div>