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还是不被内容撑大的,宽度可以是百分比、也可以是像素,只要指定即可。