表格列太宽答案

【问题标题】：Table column is too wide表格列太宽
【发布时间】：2019-05-04 06:20:43
【问题描述】：

当我调整视图宽度时，我的表格宽度没有减小到足够的程度。这可能是什么原因造成的？

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

单元格代码为：

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>

【问题讨论】：

请也发布您的 HTML。我们需要minimal reproducible example
这可能是因为文本非常宽，尽管你的同事说了。请以 HTML 格式提供该文本的示例。
对不起，我是新来的，我不确定我是什么，不能发布，因为某些数据包含用户信息。我不知道生成 html 的代码，但我已经在“检查”页面后发布了相关单元格的 html。对不起，如果这没有帮助，但我不想被解雇哈哈
尝试max-width 和word-wrap 设置这些值并玩弄直到你开心为止他。

标签： html css

【解决方案1】：

正如 cmets 所说，您的同事对于非常宽的文本自动换行几乎肯定是错误的。事实上，即使在<td> 单元格中提供word-wrap: break-word; 也是不够的，您还需要在<table> 中提供table-layout: fixed; 才能使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>```

【讨论】：

您能否修改您的答案以考虑嵌套表？ OP的问题表明存在一些嵌套。
这似乎解决了我的问题。非常感谢！
我刚刚注意到添加 table-layout:fixed 会导致单元格忽略 min-width 属性。有没有办法在不覆盖 min-width 属性的情况下在修复中添加行为？

【解决方案2】：

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

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

【讨论】：

当你没有足够的声誉时，不应使用答案框来发布 cmets（绕过评论限制）。他们可能会被否决、标记和删除。
好的，谢谢 - 不知道