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

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


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

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

td{word-break : keep-all; overflow: hidden;}

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

你可能感兴趣的:(html,table,border,generator)