table:设置边距,td内容过长用省略号代替
2024-10-16 01:09:34
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;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.card{
background-color: white;
margin-top: 10px;
border-top: 1px solid #B5B5B5;
border-bottom: 1px solid #B5B5B5;
padding: 5px;
} table {
/*合并表格边框*/
border-collapse: collapse;
/*让table的内部布局固定大小*/
table-layout: fixed;
/*设置宽度*/
width:100%;
}
td {
/*设置边距*/
padding: 3px 10px 3px 0px;
/*规定段落中的文本不进行换行*/
white-space:nowrap;
/*关闭滚动条*/
overflow:hidden;
/*溢出的文字显示为省略号*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="card">
<table border="0">
<tr>
<td style="text-align: right;width:30%;">请求类型:</td>
<td style="width:70%;">维修</td></tr>
<tr style="font-size: 12px;">
<td style="text-align: right;">用户姓名:</td>
<td>张小三张小三张小三张小三张小三张小三张小三张小三张小三张小三张小三张小三</td>
</tr>
<tr style="font-size: 12px;">
<td style="text-align: right;">联系电话:</td>
<td>135********</td>
</tr>
<tr style="font-size: 12px;">
<td style="text-align: right;">创建时间:</td>
<td>2016年4月23日 16:30</td>
</tr>
</table>
</div>
</body>
</html>
显示结果:
最新文章
- ASP.NET Core 1.0 安装并发布到Centos 7.2 使用jexus 5.8.2
- IIS-如果外网访问不到 域名
- ES6新特性简介
- 709. To Lower Case
- day06 数字类型,字符串类型,列表类型
- css如何实现一个元素高度固定宽度按比例显示?
- Junit的异常测试
- laravel 查询指定字段的值
- css浮动知识点(转)
- 2017-2018 ACM-ICPC, Asia Daejeon Regional Contest C(记忆化搜索)
- Python的自增运算符
- MVC 基架不支持 Entity Framework 6 或更高版本 即 NuGet的几个小技巧
- xcode4.3.2 arc模式下导入非arc的文件 转
- httpclient跳过https请求的验证
- 微服务架构之spring cloud 介绍
- perl6正则 4: before / after 代码断言: <;?{}>; / <;!{}>;
- 使用jquery修改标题$(";title";).html(";标题";)应注意的问题
- spring_boot启动报错
- angular.uirouter
- 虚幻引擎4设置Visual Studio