无法使用自动换行定义单元格高度

Question

如果可能，我希望 table 具有自动换行功能。我正在使用 white-space: pre-line; css-class 属性。但是随后单元格高度将被更改。看图片。如何将行高固定为 28px？当单元格没有足够的 space 时，如何禁止自动换行？

table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 1px;
  background-color: #ddd;
  font-size: 14px;
}
tr {
  vertical-align: top;
}
td {
  box-sizing: border-box;
  position: relative;
  border-width: 0 0 1px 1px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  border-style: solid;
  border-color: #ffffff;
  height: 28px;
}
td div {
  overflow: hidden;
  white-space: pre-line;
  /* white-space: nowrap; */
  text-overflow: ellipsis;
}

<div style="width: 385px; height: 280px;">
  <table>
    <col width="40" />
    <col width="112" />
    <col width="74" />
    <col width="159" />
    <tr>
      <td colspan="1" rowspan="2" height="56">
        <div>&lt;...&gt;</div>
      </td>
      <td class="bg-viewers-cube-pivot-total" colspan="1" rowspan="2" height="56">
        <div>Total:</div>
      </td>
      <td class="bg-viewers-cube-pivot-total" colspan="1" rowspan="1" height="28">
        <div>WordOne + WordTwo</div>
      </td>
      <td class="bg-viewers-cube-pivot-total" colspan="1" rowspan="1" height="28">
        <div>Sum</div>
      </td>
    </tr>
    <tr>
      <td class="bg-viewers-cube-pivot-total" colspan="1" rowspan="1" height="28">
        <div>Logical</div>
      </td>
      <td class="bg-viewers-cube-pivot-total" colspan="1" rowspan="1" height="28">
        <div>Count</div>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="25" height="700">
        <div>
        </div>
      </td>
      <td colspan="1" rowspan="2" height="56">
        <div>&lt;...&gt;</div>
      </td>
      <td colspan="1" rowspan="1" height="28">
        <div>WordOne + WordTwo</div>
      </td>
      <td colspan="1" rowspan="1" height="28">
        <div>Sum</div>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" height="28">
        <div>Logical</div>
      </td>
      <td colspan="1" rowspan="1" height="28">
        <div>Count</div>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="2" height="56">
        <div>01.01.2000</div>
      </td>
      <td colspan="1" rowspan="1" height="28">
        <div>WordOne + WordTwo</div>
      </td>
      <td colspan="1" rowspan="1" height="28">
        <div>Sum</div>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" height="28">
        <div>Logical</div>
      </td>
      <td colspan="1" rowspan="1" height="28">
        <div>Count</div>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="2" height="56">
        <div>01.01.2000 0:10:00</div>
      </td>
      <td colspan="1" rowspan="1" height="28">
        <div>WordOne + WordTwo</div>
      </td>
      <td colspan="1" rowspan="1" height="28">
        <div>Sum</div>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" height="28">
        <div>Logical</div>
      </td>
      <td colspan="1" rowspan="1" height="28">
        <div>Count</div>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="2" height="56">
        <div>01.01.2000 0:20:00</div>
      </td>
      <td colspan="1" rowspan="1" height="28">
        <div>WordOne + WordTwo</div>
      </td>
      <td colspan="1" rowspan="1" height="28">
        <div>Sum</div>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="1" height="28">
        <div>Logical</div>
      </td>
      <td colspan="1" rowspan="1" height="28">
        <div>Count</div>
      </td>
    </tr>
  </table>
</div>

Answer 1

您可以使用可滚动的单元格，而不是使用省略号来截断内容，这样您就可以保持单元格尺寸不变。我不记得使用 colspan='1' 或 rowspan='1' 有什么好处，所以我删除了它们。

此代码段有一个 <td> 包含大量文本。它位于第一行，第二个单元格。请注意尺寸仍然一致，内容可滚动。

关键CSS

td {
  overflow-y: scroll;
  overflow-x: visible;
  ...
}

片段 1

* {
  box-sizing: border-box;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 1px;
  background-color: #ddd;
  font-size: 14px;
}
tr {
  vertical-align: top;
}
td {
  overflow-y: scroll;
  overflow-x: visible;
  border-width: 0 0 1px 1px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  border-style: solid;
  border-color: #ffffff;
  max-height: 28px;
}
td div {
  max-height: 28px;
}

<div style="width: 385px; height: 280px;">

<div style="width: 385px; height: 280px;">
  <table>
    <col width="40" />
    <col width="112" />
    <col width="74" />
    <col width="159" />
    <tr>
      <td rowspan="2" height="56">
        <div>&lt;...&gt;</div>
      </td>
      <td class="bg-viewers-cube-pivot-total" rowspan="2" height="56">
        <div>Total:</div>
      </td>
      <td class="bg-viewers-cube-pivot-total" height="28">
        <div>WordOne + WordTwo + WordOne + WordTwo + WordOne + WordTwo + WordOne + WordTwo + WordOne + WordTwo + WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo</div>
      </td>
      <td class="bg-viewers-cube-pivot-total" height="28">
        <div>Sum</div>
      </td>
    </tr>
    <tr>
      <td class="bg-viewers-cube-pivot-total" height="28">
        <div>Logical</div>
      </td>
      <td class="bg-viewers-cube-pivot-total" height="28">
        <div>Count</div>
      </td>
    </tr>
    <tr>
      <td rowspan="25" height="700">
        <div>
        </div>
      </td>
      <td rowspan="2" height="56">
        <div>&lt;...&gt;</div>
      </td>
      <td height="28">
        <div>WordOne + WordTwo</div>
      </td>
      <td height="28">
        <div>Sum</div>
      </td>
    </tr>
    <tr>
      <td height="28">
        <div>Logical</div>
      </td>
      <td height="28">
        <div>Count</div>
      </td>
    </tr>
    <tr>
      <td rowspan="2" height="56">
        <div>01.01.2000</div>
      </td>
      <td height="28">
        <div>WordOne + WordTwo</div>
      </td>
      <td height="28">
        <div>Sum</div>
      </td>
    </tr>
    <tr>
      <td height="28">
        <div>Logical</div>
      </td>
      <td height="28">
        <div>Count</div>
      </td>
    </tr>
    <tr>
      <td rowspan="2" height="56">
        <div>01.01.2000 0:10:00</div>
      </td>
      <td height="28">
        <div>WordOne + WordTwo</div>
      </td>
      <td height="28">
        <div>Sum</div>
      </td>
    </tr>
    <tr>
      <td height="28">
        <div>Logical</div>
      </td>
      <td height="28">
        <div>Count</div>
      </td>
    </tr>
    <tr>
      <td rowspan="2" height="56">
        <div>01.01.2000 0:20:00</div>
      </td>
      <td height="28">
        <div>WordOne + WordTwo</div>
      </td>
      <td height="28">
        <div>Sum</div>
      </td>
    </tr>
    <tr>
      <td height="28">
        <div>Logical</div>
      </td>
      <td height="28">
        <div>Count</div>
      </td>
    </tr>
  </table>
</div>

Answer 2

我找到了解决方案。我需要将内容大小从 td 移动到 div。

* {
  box-sizing: border-box;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 1px;
  background-color: #ddd;
  font-size: 14px;
}
tr {
  vertical-align: top;
}
td {
  padding: 0;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff;
}
td div {
  padding: 4px 12px 1px 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre-line;
}

<div>
  <table>
    <col width="40" />
    <col width="112" />
    <col width="74" />
    <col width="159" />
    <tr>
      <td rowspan="2">
        <div style="height: 55px">&lt;...&gt;</div>
      </td>
      <td rowspan="2">
        <div style="height: 55px">Total:</div>
      </td>
      <td>
        <div style="height: 27px">WordOne + WordTwo + WordOne + WordTwo + WordOne + WordTwo + WordOne + WordTwo + WordOne + WordTwo + WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo +WordOne + WordTwo</div>
      </td>
      <td>
        <div style="height: 27px">Sum</div>
      </td>
    </tr>
    <tr>
      <td>
        <div style="height: 27px">Logical</div>
      </td>
      <td>
        <div style="height: 27px">Count</div>
      </td>
    </tr>
    <tr>
      <td rowspan="8">
        <div style="height: 223px">
        </div>
      </td>
      <td rowspan="2">
        <div style="height: 55px">&lt;...&gt;</div>
      </td>
      <td>
        <div style="height: 27px">WordOne + WordTwo</div>
      </td>
      <td>
        <div style="height: 27px">Sum</div>
      </td>
    </tr>
    <tr>
      <td>
        <div style="height: 27px">Logical</div>
      </td>
      <td>
        <div style="height: 27px">Count</div>
      </td>
    </tr>
    <tr>
      <td rowspan="2">
        <div style="height: 55px">01.01.2000</div>
      </td>
      <td>
        <div style="height: 27px">WordOne + WordTwo</div>
      </td>
      <td>
        <div style="height: 27px">Sum</div>
      </td>
    </tr>
    <tr>
      <td>
        <div style="height: 27px">Logical</div>
      </td>
      <td>
        <div style="height: 27px">Count</div>
      </td>
    </tr>
    <tr>
      <td rowspan="2">
        <div style="height: 55px">01.01.2000 0:20:00 01.01.2000 0:20:00 01.01.2000 0:20:00</div>
      </td>
      <td>
        <div style="height: 27px">WordOne + WordTwo</div>
      </td>
      <td>
        <div style="height: 27px">Sum</div>
      </td>
    </tr>
    <tr>
      <td>
        <div style="height: 27px">Logical</div>
      </td>
      <td>
        <div style="height: 27px">Count</div>
      </td>
    </tr>
    <tr>
      <td rowspan="2">
        <div style="height: 55px">01.01.2000 0:20:00 01.01.2000 0:20:00 01.01.2000 0:20:00</div>
      </td>
      <td>
        <div style="height: 27px">WordOne + WordTwo</div>
      </td>
      <td>
        <div style="height: 27px">Sum</div>
      </td>
    </tr>
    <tr>
      <td>
        <div style="height: 27px">Logical</div>
      </td>
      <td>
        <div style="height: 27px">Count</div>
      </td>
    </tr>
  </table>
</div>

但是垂直溢出的文本省略号将不起作用。

无法使用自动换行定义单元格高度

Can't define cell height with word-wrap

html

css

html-table

word-wrap

关键CSS

片段 1