Question

如何让表格行具有完全相同的高度？每当if (locations[i][4] == 'Yes')中的文本超出限制时，它就会超出行。我如何以不会这样做的方式制作它。而是显示较少的文字这是代码

<td>

Answer 1

关于多个相关内容部分（相对于表格单元格）和简洁，“精心修剪”的UI，您必须拥有格式良好的数据或愿意妥协。根据您的问题，隐含的假设是您的数据不格式正确（在文本量方面），因此您愿意妥协。两个建议：

Disallow white space wrapping：
```
td { white-space: nowrap; }
```

Enforce a max-width and make an ellipsis：

td {
    white-space: nowrap;
    max-width: 67px;
    overflow: hidden;
    text-overflow: ellipsis;
}

这两项建议的关键是，它们通过td将每个white-space: nowrap元素（以及整个行）的高度锁定为单个文本行。

当然还有其他选项可以保持一致的表高度，但如果没有更明确的问题，很难将它们全部枚举。

Answer 2

尝试围绕div

包装文本

<div class="firstDiv" style="width: 200px; height: 200px;">

    <table border="1" style="border-collapse: collapse;">
        <tr style="height: 20px;">
            <th width="33%"><div>
            First Name
            </div></th>
            <th width="33%"><div>
            Last Name
            </div></th>
            <th width="33%"><div>
            Country Of Origin OR MIG
            </div></th>
        </tr>
        <tr>
            <td><div>
            Mark
            </div></td>
            <td><div>
            Hopkins lee brimlow
            </div></td>
            <td><div>
            Not living in world right now
            </div></td>
        </tr>
    </table>
</div>

并使用身高

th div, td div{
  height:40px;
  overflow:auto;
}

https://jsfiddle.net/L2awyezb/

表格行扩展文本

2 个答案: