Question

调整视图宽度时，表的宽度不足。可能是什么原因造成的？

我问了一个团队成员，这是否可能是由其中一个单元格中的一个非常长的String引起的，但是他回答说，一个字符串的长度会自动缠绕成固定的列大小。

单元格代码为：

table .table5-col td.col2 {
    min-width: 155px;
    width: 29%;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 8px;
    vertical-align: top;
}
td {
    display: table-cell;
    vertical-align: inherit;
}

父表代码为：

table .table5-col {
    min-width: 540px;
    max-width: 945px;
    width: 100%;
}
table {
    display: table;
    border-collapse: separate;
}

我认为这就是所有相关的代码。此父表还有另一个父表，但是我不确定这是否相关。预先感谢。

编辑：我应该注意，对于大多数数据，表的宽度减小得还可以。

编辑（例如包含大字符串的单元格的HTML示例）：

<td class="col2"><span class="font-s color1"><a href="some random link" target="_blank">something something something a+really+long+string+a+really+long+string+a+really+long+string</a></span><br><span class="font-s color2">something something: EUR 799,85 (something)</span></td>

Answer 1

正如评论所说，您的同事几乎可以肯定非常宽的文本自动包装功能是错误的。实际上甚至在word-wrap: break-word;单元中提供<td>还是不够的，您还需要在table-layout: fixed;中使用<table>来使break-word正常工作。

我不知道您要做什么，但是this works，即：

<style>
table.table5-col td.col2 {
    min-width: 155px;
    width: 29%;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 8px;
    vertical-align: top;
}
td {
    display: table-cell;
    vertical-align: inherit;
    word-wrap: break-word;
}
table.table5-col {
    min-width: 540px;
    max-width: 945px;
    width: 100%;
}
table {
    display: table;
    border-collapse: separate;
    table-layout: fixed
}
</style>
<table class="table5-col">
  <tbody>
    <tr>
      <td class="col2">SomeverylongdatawhichmayormaynotwrapwewillfindoutSomeverylongdatawhichmayormaynotwrapwewillfindoutSomeverylongdatawhichmayormaynotwrapwewillfindoutSomeverylongdatawhichmayormaynotwrapwewillfindoutSomeverylongdatawhichmayormaynotwrapwewillfindoutSomeverylongdatawhichmayormaynotwrapwewillfindoutSomeverylongdatawhichmayormaynotwrapwewillfindout</td>
      <td>Some not-as-long data</td>
    </tr>
    <tr>
      <td>Someverylonlfindout</td>
      <td>Some not-as-long data</td>
    </tr>
  </tbody>
</table>```

Answer 2

最小宽度：155像素；或最小宽度：540px；

可能会导致问题-尝试使用这些值

表格栏太宽

2 个答案: