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

Question

如果可能的话，我想用自动换行来制作表格。我正在使用white-space: pre-line;css 类属性。但随后单元格高度将发生变化。看图片。如何将行高固定为 28px？当单元格没有足够空间时，如何禁止自动换行？

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

我找到了解决方案。我需要将内容大小从 移动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>

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

Answer 2

您可以使用可滚动的单元格，而不是使用省略号来截断内容，这样您就可以保持单元格尺寸不变。我不记得使用colspan='1'or有什么好处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>