TD不换行也不会被撑大撑开并加上薄边框的方法

本文主要是介绍TD不换行也不会被撑大撑开并加上薄边框的方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

TD不换行也不会被撑大的方法

TD不换行也不会被撑大撑开的方法：

table{table-layout : fixed;width:100%;}

td{word-break : keep-all; overflow: hidden;white-space:nowrap;text-overflow: ellipsis;}

注意：table的宽度一定要设置，否则TD还是不被内容撑大的，宽度可以是百分比、也可以是像素，只要指定即可。

TABLE加薄边框的的方法：

table{border-collapse: collapse;border: none;}

td{border: solid #000 1px;}

列宽设置的最好方法：

注意：

1)、col的样式可以通过属性设置、也可以通过style设置、也可以通过class设置。

2)、一般最好一列的宽度不要设置。如果设置了最后一列的宽度，当各列宽度之和不等于table的宽度时、会按比例压缩或扩大其余各列的宽度。

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>data demo</title><style type="text/css"> html,body{width:100%;height:100%;margin:0px;padding:0px;}table { width:100%;border-collapse: collapse; border: none; table-layout: fixed;} td { border: solid #000 1px; word-break : keep-all;white-space:nowrap;overflow: hidden;} </style>
<!--<script src="jquery.min.js"></script><script src="jQuery.md5.js"></script>
-->
</head>
<body>
<table style="height:100%;width:100%"><colgroup><col style="width:50px;"></col><col width='100px'></col><col width='100px'></col><col ></col></colgroup><tr><td rowspan=2>No</td><td colspan=3>User Info</td></tr><tr><td>UserCode</td><td>UserName</td><td>ID CARD</td></tr><tr><td>1</td><td>1001</td><td>王德封</td><td>330623***********9</td></tr><tr><td>2</td><td>1002</td><td>王祉临</td><td>3301*************9</td></tr></tr><td>3</td><td>1003</td><td>王祉溢</td><td>3301*************0</td></tr></table>
</body>
</html>

方法：

1、TABLE：table-layout : fixed;width:100%;

2、TD：word-break : keep-all; overflow: hidden;

注意：table的宽度一定要设置，否则TD还是不被内容撑大的，宽度可以是百分比、也可以是像素，只要指定即可。

TABLE加薄边框的的方法：

1、TABLE：table-layout : fixed;width:100%;

2、TD：word-break : keep-all; overflow: hidden;

注意：table的宽度一定要设置，否则TD还是不被内容撑大的，宽度可以是百分比、也可以是像素，只要指定即可。

这篇关于TD不换行也不会被撑大撑开并加上薄边框的方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！