css 表列太宽

nzkunb0c 于 2022-12-24 发布在其他

关注(0)|答案(2)|浏览(109)

调整视图宽度时，表的宽度缩小得不够。原因可能是什么？
我问一个团队成员，这是否是由某个单元格中的一个超长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>

css

来源：https://stackoverflow.com/questions/55976255/table-column-is-too-wide

2条答案

按热度按时间

l2osamch1#

正如评论所说，您的同事几乎肯定是错误的，关于非常宽的文本自动换行。事实上，即使在<td>单元格中提供word-wrap: break-word;也是不够的，您还需要在<table>中提供table-layout: fixed;才能使break-word工作。
我不知道你到底想干什么，但是this works，也就是：

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
}

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

赞(0）回复(0）举报 2022-12-24

at0kjp5o2#

最小宽度：155 px;或最小宽度：540像素;
可能会导致问题-尝试使用这些值

赞(0）回复(0）举报 2022-12-24