'Can't define cell height with word-wrap

I would like make the table with auto word-wrap when it possible. I'm using white-space: pre-line; css-class property. But then cell height will be changed. See the picture. How can I fix row height to 28px? How can I forbid word-wrap, when cell doesn't have enough space?

enter image description here

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>
htmlcsshtml-tableword-wrap


Solution 1:[1]

I found solution. I need to move content size from td to 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>

But text ellipsis for vertical overflow will not work.

Solution 2:[2]

Instead of using ellipsis to truncate the content, you could have scrollable cells so you can keep your cell dimensions constant. I don't recall any advantage of using colspan='1' or rowspan='1', so I removed them.

This Snippet has a <td> with a large amount of text. it's located at first row, second cell. Note the dimensions are still consistent and the content is scrollable.

KEY CSS

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

SNIPPET1

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 madreason
Solution 2 Community

Related Questions