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

时间：2016-12-12 11:25:55

标签： html css html-table word-wrap equal-heights

我希望在可能的情况下使用自动自动换行使表格成为可能。我使用的是white-space: pre-line; css-class属性。但是细胞高度会改变。看图。如何将行高修复为28px？当单元格没有足够的空间时，我怎么能禁止自动换行？

enter image description here

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

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

此代码段的<td>包含大量文字。它位于第一排，第二排。请注意，维度仍然一致，内容可滚动。

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>

答案 1 :(得分：1)

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

＆＃13;
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

相关问题
最新问题