table:设置边距,td内容过长用省略号代替

最新推荐文章于 2023-03-14 14:16:32 发布

front_end_fan

最新推荐文章于 2023-03-14 14:16:32 发布

阅读量1.4k

点赞数

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

本文链接：https://blog.csdn.net/qq_39198420/article/details/78526559

版权

css 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

文本溢出

4 篇文章 0 订阅

订阅专栏

table:设置边距,td内容过长用省略号代替

1.table:设置边距

合并表格边框border-collapse: collapse，然后用th，td的padding设置内容和边框之间的空隙padding。

2.td内容过长用省略号代替

在table中必须设置style:table-layout: fixed;这条属性就是让table的内部布局固定大小。这个时候就用width属性调节td的长度。之后在添加如下：td {white-space:nowrap;overflow:hidden;text-overflow: ellipsis;}

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         .card{
 8             background-color: white;
 9             margin-top: 10px;
10             border-top: 1px solid #B5B5B5;
11             border-bottom: 1px solid #B5B5B5;
12             padding: 5px;
13         }
14         
15         table {
16             /*合并表格边框*/
17             border-collapse: collapse;
18             /*让table的内部布局固定大小*/
19             table-layout: fixed;
20             /*设置宽度*/
21             width:100%;
22         }
23         td {
24             /*设置边距*/
25             padding: 3px 10px 3px 0px;
26             /*规定段落中的文本不进行换行*/
27             white-space:nowrap;
28             /*关闭滚动条*/
29             overflow:hidden;
30             /*溢出的文字显示为省略号*/
31             text-overflow: ellipsis;
32         }
33     </style>
34 </head>
35 <body>
36     <div class="card">
37         <table border="0">
38             <tr>
39                 <td style="text-align: right;width:30%;">请求类型:</td>
40                 <td style="width:70%;">维修</td></tr>
41             <tr style="font-size: 12px;">
42                 <td style="text-align: right;">用户姓名:</td>
43                 <td>张小三张小三张小三张小三张小三张小三张小三张小三张小三张小三张小三张小三</td>
44             </tr>
45             <tr style="font-size: 12px;">
46                 <td style="text-align: right;">联系电话:</td>
47                 <td>135********</td>
48             </tr>
49             <tr style="font-size: 12px;">
50                 <td style="text-align: right;">创建时间:</td>
51                 <td>2016年4月23日 16:30</td>
52             </tr>
53         </table>
54     </div>
55 </body>
56 </html>

显示结果:

front_end_fan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table:设置边距,td内容过长用省略号代替

table:设置边距,td内容过长用省略号代替1.table:设置边距合并表格边框border-collapse: collapse，然后用th，td的padding设置内容和边框之间的空隙padding。2.td内容过长用省略号代替在table中必须设置style:table-layout: fixed;这条属性就是让table的内部布局固定大小。这个时候就用width属性调节td的长度。
复制链接

扫一扫