table中 td th 单行显示不下显示...

Posted 2023-04-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了table中 td th 单行显示不下显示...相关的知识，希望对你有一定的参考价值。

参考技术A 遇到这种情况，我们第一个想到的就是

white-space:nowrap;规定段落中的文本不进行换行

overflow:hidden;关闭滚动条

text-overflow: ellipsis;溢出的文字显示为省略号

但是我实际编写过程中遇到一个问题：高度撑开太高，宽度也很宽

解决：用这些属性，table要有一个属性设置的前提

在table中必须设置style:table-layout: fixed;

table

<table border="1">   border(表格线宽)
  <tr>                行
    <th>Month</th>    列 colspan="2"可以跨列.下面的tr中需要添加额外的td；rowspan="2" 可以跨行，下一个tr需要减少一个td。 th一般用于表示表头
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>  td一般用于表示表数据
    <td>$100</td>
  </tr>
</table>

<html>

<body>

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

</body>
</html>

以上是关于table中 td th 单行显示不下显示...的主要内容，如果未能解决你的问题，请参考以下文章

antd组件table选中行（单行/多行）高亮显示