剪切表格中单元格的内容

Question

我想创建一个 9x9 的方桌，宽度和高度应为 100%，每个单元格的高度和宽度应为 11.11%。我可以用下面的代码来做到这一点，但是当单元格内的文本太大时，单元格会随之向下生长。我不想要这样。我只是想隐藏文本。保留表格的大小是我的首要任务；）

这是我写的：

<div class="full_screen">
<table border="1" class="full_width full_height">
<tr class="cell_row">
    <td class="cell">long long long long long text</td>
    <td class="cell">2</td>
    <td class="cell">3</td>
    <td class="cell">4</td>
    <td class="cell">5</td>
    <td class="cell">6</td>
    <td class="cell">7</td>
    <td class="cell">8</td>
    <td class="cell">9</td>
</tr>
... other 8 rows and its cells are similar...

CSS

body {
    font-size: 9px;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    background-color: rgba(0,0,0,0);
    height: 100%;
}

div.full_screen {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cell_row {
    width: 100%;
    height: 11%;
}

.cell {
    width: 11%;
     /*height:100%;*/ /*cell height should be always 11% the height of the hole table*/
    margin: 0px;
    padding: 0px;
    word-break: break-all;
}

如何剪切单元格的内容，使单元格的高度始终为表格的 11% (100%/9 =11.11%)？

Answer 1

你这里有几个问题。

首先，表格并不是为了以这种方式工作而设计的，它们是水平扩展的，而不是垂直扩展的，因此它们永远不会尊重每一height:11%行。

其次，TR样式会被忽略，因此您可以安全地删除它们。

第三，TD忽略高度的原因与第一点相同。

但是，对于第三点有一个解决方法，您可以使用它line-height来强制TD高度或嵌套元素（即DIV）具有适当的高度。但这仍然给您带来了一个问题，无法获得文档/窗口总高度的 11% 的高度。

您可以做的是使用一些 JavaScript 来更新TD页面加载时的高度（使用上面解释的解决方法）（并在调整大小时更新）。