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高度（使用上面解释的解决方法）（并在调整大小时更新）。

Answer 2

您可以添加

table-layout:fixed;
word-wrap:break-word;

到你的班级。它将确保您的td宽度不会超过给定的％。它会自动适当地包装您的内容。

Answer 3

根据我可以看到它可以通过以下两种方式修复：

您可以添加font-size：11px; .cell类
您是从后端获取此数据还是使用JSP或某些内容显示文本。如果你知道你需要显示多少个字母，你可以获得子串并附加...（椭圆）。像你一样，字符串很长很长......

如果您的申请允许。

剪切表格中的单元格内容

3 个答案: