本文主要是介绍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;}
列宽设置的最好方法：
<colgroup>
<col width='20px'></col>
<col width='100px'></col>
<col width='100px'></col>
<col ></col>
</colgroup>
注意：
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不换行也不会被撑大撑开 并加上薄边框的方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
