table设置列宽度
遇到⼀个表格不能设置宽度（table有宽度，有⼀两列需要设固定⼤⼩的宽度并希望看到展现出来的宽度值与设定的⼀样，其他的列则可以根据剩余宽度⾃动填充，但是显⽰出来的宽度⽐实际设置的值多了⼏个）这个问题，百度了⼀下查到⼀些资料：
⾸先贴资料，相信⼤家看了基本就了解了：
tableLayout 属性⽤来显⽰表格单元格、⾏、列的算法规则。
固定表格布局：
固定表格布局与⾃动表格布局相⽐，允许浏览器更快地对表格进⾏布局。
⾃动表格布局：
在⾃动表格布局中，列的宽度是由列单元格中没有折⾏的最宽的内容设定的。
因此，在设定宽度的时候需要给table添加table-layout:fixed;。
但是在给td设定了宽度以后还是不能正常显⽰，此时就需要⼀个其他的属性 col或colgroup，给col或者colgroup设置⼀个宽度即可解决问题。(⼀个有趣的点是当设定的宽度不是4的倍数的时候，列的宽度总会显⽰⼩数，即差那么⼀点才满设定的宽度，作为⼀个⼩菜鸡暂时没发现为啥，(lll￢ω￢))。
下⾯贴个代码，仅供参考：
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title></title>
6<style type="text/css">
7table,tr,td{
8border:1px solid;
9border-collapse:collapse;
10}
11table{
12width:1000px;
13table-layout:fixed;
14}
15tr,td{
16height:30px;
17}
18table>tbody>th>td{
19width: 40px;
20}
21/*设定td的宽度,⽆效*/
22/*#col1{
23width: 40px;
24}
25#col2{
26width: 80px;
27}
28#col4{
29width: 50px;
30}
31#col7{
32width: 120px;
37<table>table设置内边框
38<!--所有的宽度设定时，已设定宽度不能被4整除时会出现不能设定宽度，与列数多少⽆关--> 39<!--全部⽤colgroup-->
40<!--<colgroup align="center" width="100">
41</colgroup>
42<colgroup  />
43<colgroup  />
44<colgroup  />
45<colgroup />
46<colgroup />
47<colgroup />
48<colgroup />-->
49<!--全部⽤col-->
50<!--<col width="90" />
51<col  />
52<col width="90" />-->
53<!--<col  />
54<col width="80"/>
55<col  />
56<col  />
57<col  />-->
58<!--colspan 和 col融合-->
59<colgroup span="3" width="90">
60<!--组合⽤时同样受4的倍数限定-->
61<col width="90"/>
62<col width="90"/>
63<col width="120"/>
64</colgroup>
65<colgroup span="1"></colgroup>
66<colgroup width="80"></colgroup> <!--span缺省值为1-->
67<colgroup width="90"></colgroup>
68<colgroup span="2"></colgroup>
69<tr>
70<td id="col1">diyi</td>
71<td id="col1">diyi</td>
72<td id="col2">第⼆列</td>
73<td id="col3">第三列</td>
74<td id="col4">第四列</td>
75<td id="col5">第五列</td>
76<td id="col6">第六列</td>
77<td id="col7">第七列</td>
78</tr>
79<tr>
80<td>adfa</td>
81<td>飒飒东风</td>
82<td>谔谔</td>
83<td>打发</td>
84<td>打法微软</td>
85<td>啊多发点</td>
86<td>啊啊啊啊啊啊</td>
87<td>啊啊啊啊啊啊</td>
88</tr>
89<tr>
90<td>fasdfa</td>
91<td>阿斯蒂芬</td>
92<td>啊打发</td>
93<td>阿迪斯发</td>
94<td>爱的⾊放我</td>
95<td>的法沙发和</td>
96<td>啊啊啊啊啊啊</td>
97<td>啊打发</td>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。