关于table，你也许会吐槽：table元素会使浏览器解析页面速读变慢，延迟页面渲染速度等等。但是呢，吐槽归吐槽，table在数据表格的展现中，仍是最合理的方式之一。尤其在MIS系统中，table的用处基本是每个页面都需要的。在数据长度不一致的情况下，如何得到你想要的表格布局呢？
关于table-layout
来举个栗子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: 'Microsoft Yahei';
}
.table{
width: 1050px;
margin: 50px auto;
border: 1px #ccc solid;
line-height: 30px;
border-collapse: collapse;
}
.table th,
.table td{
border: 1px #ccc solid;
text-align: center;
width: 10%;
}
</style>
</head>
<body>
<table class='table'>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Class</th>
<th>Address</th>
<th>Telphone</th>
<th>Name</th>
<th>Age</th>
<th>Class</th>
<th>Address</th>
<th>Telphone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jim Green</td>
<td>12</td>
<td> Class Two, Grade Three</td>
<td>2025 M Street, Northwest, Washington, DC</td>
<td>18511860000</td>
<td>Jim Green</td>
<td>12</td>
<td> Class Two, Grade Three</td>
<td>2025 M Street, Northwest, Washington, DC</td>
<td>18511860000</td>
</tr>
<tr>
<td>Jim Green</td>
<td>12</td>
<td> Class Two, Grade Three</td>
<td>2025 M Street, Northwest, Washington, DC</td>
<td>18511860000</td>
<td>Jim Green</td>
<td>12</td>
<td> Class Two, Grade Three</td>
<td>2025 M Street, Northwest, Washington, DC</td>
<td>18511860000</td>
</tr>
</tbody>
</table>
</body>
</html>
|
效果如图下图：
我擦嘞，说好的单元格10%呢，address和telphone怎么都撑开了？
这个时候，table-layout就要展示它的能力了。
table-layout: automatic|fixed|inherit
-table-layout: automatic, 默认值，列宽有单元格的内容宽度决定(碰上一长串的数字，表格看起来简直是灾难).
-table-layout: fixed, 列宽有表格宽度和单元格宽度的设定值展现(你想要的，就在这里).
-table-layout: inherit, 从父元素继承 table-layout 属性的值.
1
2
3
4
5
6
7
8
| .table{
width: 800px;
margin: 50px auto;
border: 1px #ccc solid;
line-height: 30px;
border-collapse: collapse;
table-layout: fixed;
}
|
效果图来了，
每个单元格终于乖乖的实现了10%，但是呢，这些字怎么跑出来了啊？咱们继续看！
word-wrap和word-break
单元格宽度就那么宽，当内容太多时，文本溢出了，该怎么办呢？换行呗！咱们看下这两个属性：word-wrap和word-break。
-word-wrap: 告诉浏览器是否允许它在单词内断句，防止一个字符串太长，无法找到自然断点而产生溢出现象(是不是又想起来上面的table了)。
-word-break: 可以让浏览器实现在任意位置的换行。
word-wrap:normal(只在允许的断字点换行,浏览器保持默认处理)|break-word(在长单词或 URL 地址内部进行换行)
来实践一下：
1
2
3
4
5
6
7
| .table th,
.table td{
border: 1px #ccc solid;
text-align: center;
width: 10%;
word-wrap: break-word;
}
|
效果来了：
我们可以看到允许单词内换行，Northwest和Washington，均为单词内换行。
如果我们不想长单词被在词内换行呢？
word-break:normal(浏览器保持默认处理)|break-all(允许在单词内换行)|keep-all(只能在半角空格或连字符处换行)
1
2
3
4
5
6
7
8
| .table th,
.table td{
border: 1px #ccc solid;
text-align: center;
width: 10%;
word-break: keep-all;
word-wrap: normal;
}
|
大功告成：
