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

最新推荐文章于 2023-12-11 15:24:24 发布

逐浪_一生悬命

最新推荐文章于 2023-12-11 15:24:24 发布

阅读量1.3w

点赞数

分类专栏：网页专区文章标签： generator html border table

本文链接：https://blog.csdn.net/szwangdf/article/details/2513547

版权

网页专区专栏收录该内容

41 篇文章 0 订阅

订阅专栏

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