Question

我需要创建一个带有固定标题的表格，一个可在Y轴（但不在X轴上）滚动的表格主体和一个固定宽度的列。

我找到了问题的答案：https://stackoverflow.com/a/17585032/6033166

它就像一个魅力（非常感谢！），我开始将我的代码基于这个答案。我添加了table-layout: fixed，word-wrap: break-word和overflow-y: auto; overflow-x: hidden;以解决我的其他要求。

然而，仍有一个问题。如果将非常长的文本输入到表格单元格中，没有（或只有极少数）空格，则不会添加换行符，而是宽度将通过强力改变，表格行为＆＃34;腾出空间＆＃34; 34;对于一个大入口，将其他细胞推向两侧。

我找到了关于SO的答案和建议，说我可以将<wbr>标记添加到内容中，从而建议浏览器何时进行换行。这里的问题是从数据库中检索内容（通过C＃），然后需要在显示之前进行处理，如果可能的话，这是我想跳过的步骤。如果有任何方法，我想在CSS中保留它。但是，如果没有其他可能性，我也对其他解决方案持开放态度我也尝试了全部，同样的结果。

这是我目前的桌面CSS：

    table.tableSection {
    display: table;
    width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}
table.tableSection tbody {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100px;
}
table.tableSection tr {
    width: 100%;
    display: table;
    text-align: left;
}
table.tableSection th, table.tableSection td {
    width: 33%;
}

这是HTML代码：

<table class="tableSection">
<thead>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
    <tr>
        <td>Text</td>
        <td>This does work very well with blank spaces. The text has no limitation in size, line breaks will simply be added.</td>
        <td>Text</td>
    </tr>
    <tr>
        <td>Text</td>
        <td>This_does_not_work_sadly,_which_is_a_huge_problem,_since_blank_spaces_are_not_permitted_as_word_delimiters.</td>
        <td>Text</td>
    </tr>
    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
</tbody>

以下链接指向我的jsfiddle以表明我的意思：https://jsfiddle.net/Fi_Vi/bmc7r8rz/3/

Answer 1

将以下代码添加到您的td css样式table.tableSection th, table.tableSection td { ... }

word-break: break-all;

这是更新的小提琴： https://jsfiddle.net/bmc7r8rz/8/

Answer 2

我会用简单的：

table.tableSection th, table.tableSection td {
  float: left;
  width: 33%;
  word-wrap: break-all;
}

CSS word-wrap在表中不起作用

2 个答案: