table设置td文本超出为省略号无效的解决方法

最新推荐文章于 2022-10-12 11:16:41 发布

整理琐碎的记忆

最新推荐文章于 2022-10-12 11:16:41 发布

阅读量1.1w

点赞数

分类专栏：表格溢出文章标签：省略号表格

表格溢出专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>表格演示</title>
 6     <style type="text/css">
 7         table{
 8             width: 100%;
 9             table-layout: fixed;
10         }
11         .name{
12             width: 10%;
13         }
14         .age{
15             width: 20%;
16         }
17         .sex{
18             width: 30%;
19         }
20         .addr{
21             width: 40%;
22         }
23         
24     </style>
25 </head>
26 <body>
27     <table border="1" cellspacing="0" cellpadding="0">
28         <thead>
29             <tr>
30                 <th class="name">姓名</th>
31                 <th class="age">年龄</th>
32                 <th class="sex">性别</th>
33                 <th class="addr">地址</th>
34             </tr>
35         </thead>
36         <tbody>
37             <tr>
38                 <td>李四</td>
39                 <td>13</td>
40                 <td>男</td>
41                 <td>山东</td>
42             </tr>
43             <tr>
44                 <td>李四</td>
45                 <td>13</td>
46                 <td>男</td>
47                 <td>山东</td>
48             </tr>
49             <tr>
50                 <td>李四</td>
51                 <td>13</td>
52                 <td>男</td>
53                 <td>山东</td>
54             </tr>
55         </tbody>
56     </table>
57 </body>
58 </html>

td关键代码如下:
white-space: nowrap;/*控制单行显示*/
overflow: hidden;/*超出隐藏*/
text-overflow: ellipsis;/*隐藏的字符用省略号表示*/

table代码如下:
table-layout: fixed;(允许设置列宽,通过th)  默认为 table-layout: automatic 默认每一列列宽均分(不可设置列宽)

整理琐碎的记忆

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
table设置td文本超出为省略号无效的解决方法

doctype html> 2 html lang="en"> 3 head> 4 meta charset="UTF-8" /> 5 title>表格演示title> 6 style type="text/css"> 7 table{ 8 width: 100%; 9 table-layout
复制链接

扫一扫