table--邊框樣式設定 Table的一些設定（自適應以及溢位）
Table的一些設定（自適應以及溢位）
1、table重置的兩個屬性：
①border-collapse: collapse; /* 為表格設定合併邊框模型 */
②border-spacing: 0; /* 設定在表格中的單元格之間出現的間距為0 */
程式碼：
<div class="fz">
<div style="width: 600px;" class="bg-grey p10">
<table class="bg-white">
<tr>
<th>序號</th>
<th>開始時間</th>
<th>結束時間</th>
<th>備註</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>2014/8/2</td>
<td>2015/1/1</td>
<td>時間都去哪兒了</td>
<td><a href="#">編輯</a></td>
</tr>
</table>
</div>
</div>
當只重置了td,th{padding:0} 沒有設定邊框的效果
設定td{ border:1px solid #ff4136;}的效果
設定table { border-collapse: collapse; border-spacing: 0; }的效果
2、單行溢位點點顯示
.ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
幾個必要條件是：
①一定要設定元素的寬度。
②white-space: nowrap; white-space 屬性設定如何處理元素內的空白。nowrap 文字不會換行，文字會在在同一行上繼續，直到遇到 <br> 標籤為止。（防止文字往下撐開；即使你定義了高度，省略號也不會出現，多餘的文字會被剪裁掉。）
③overflow: hidden; （防止文字橫向撐開）
④text-overflow: ellipsis; ellipsis 當物件內文字溢位時顯示省略標記（...）
3、表格的寬度設定
td{ border:1px solid #ff4136;}
.title{ width: 100px;}
.kaiyao{ width: 200px;}
.time{ width: 120px;}
<div class="fz">
<div style="width: 800px;" class="bg-grey p10">
<table class="bg-white pctW">
<tr>
<th class="title">標題</th>
<th class="kaiyao">概要</th>
<th class="time">時間</th>
</tr>
<tr>
<td>單行點點點顯示</td>
<td>據說Chrome34+支援響應式圖片，就是直接<img>標籤上使用特定屬性，就可以實現圖片自動的響應式獲取，大夥可以試試~</td>
<td>2014-04-09 23:51</td>
</tr>
<tr>
<td>連續字元換行</td>
<td>zheduanzhongwenpinyinzhemechangwojiubuxingbuhuanhangyaobuliugezhongzizhileidemeirenfanyingjiusuanle</td>
<td>2014-04-09 23:53</td>
</tr>
</table>
</div>
</div>
執行效果：
問題：雖然為td設定了寬度，但因為單元格的流動性，使文字不存在溢位效果。而且表格的寬度是跟隨單元格內容多少自動計算尺寸。
解決辦法：新增
table{ table-layout: fixed;}
效果：
table-layout: fixed的作用在於，讓表格佈局固定。
存在問題：中文不會溢位，英文溢位?表格設定的寬度仍不起作用？
解決：為“概要”的兩個單元格分別新增.ell 和.bk樣式
.cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }
.bk { word-wrap: break-word; }
執行效果：
存在問題：表格設定的寬度仍不起作用？。經計算，每個td都設定寬度的情況，單元格的實際寬度是按table寬度的比例計算。
例如：table的寬度為800px。 td的寬度分別為100px 200px 100px。在table-layout:fixed情況下。即為800的 1:2:1比例
實際td的寬度為：200px，400px，200px。如不想按比例計算，可以如下解決方案：
解決：刪除表格最後一個單元格即“時間”引用的寬度限制class “.time”
效果：
“標題”和“概要”的寬度即為設定的100px和200px；
總結：
（1）要想設定表格的寬度，其必然要新增的屬性是table-layout: fixed; 若沒有該屬性，即便設定了單元格的寬度.ell 和.bk也不會起作用。
（2）添加了table-layout: fixed屬性後，①單元格的寬度用百分比表示。②單元格的寬度用px表示的時候，最後一個單元格不要設定寬度。
4、雙欄自適應cell部分連續英文符換行
/*雙欄自適應cell部分連續英文符換行*/
.cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }
注意跟普通的浮動不一樣，浮動是環繞，這個是雙欄。
程式碼：
.cell{ display: table-cell; *display: inline-block;}
<div class="fz">
<div style="width: 600px;" class="bg-grey p10">
<div>
<img src=" images/xxx.jpg" class="l p10" width="100">
<div class="cell">
<p class="cell_bk">
1977年的今天，28歲的拉齊奧中場球員Luciano Re Cecconi和兩個朋友走入羅馬的一家珠寶店。不知為何，他突然想來個惡搞玩笑。進入珠寶店後他就大喊，"別動！打劫！"他隨後、也是最後的兩句話是在珠寶店主衝出開槍命中他後說的，"It's a joke！It's a Joke！"30分鐘後，他死了。
<br/><br/>
<span>//zxx:我xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<h3>無處理</h3>
</p>
</div>
</div>
</div>
</div>
效果：（相容各瀏覽器）
當設定圖片img的width為200的效果
注意：只能是兩欄效果，三欄時ie6/7瀏覽器有問題。
對比float可以可以實現兩欄效果，只是當圖片寬度改變的時候不是自適應，需同時改變右邊div的padding-left的值
<img src=" images/xxx.jpg" class="l p10" width="200">
<div style="padding-left: 220px;">
<p class="cell_bk">
。。。。。。。
table 設定表格有滾動條。
少說多做，程式碼中有註釋：
1 <!DOCTYPE HTML>
2 <html>
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 <title>設定表格有滾動條</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 }
12
13 table {
14 /*設定相鄰單元格的邊框間的距離*/
15 border-spacing: 0;
16 /*表格設定合併邊框模型*/
17 border-collapse: collapse;
18 text-align: center;
19 }
20 /*關鍵設定 tbody出現滾動條*/
21 table tbody {
22 display: block;
23 height: 80px;
24 overflow-y: scroll;
25 }
26
27 table thead,
28 tbody tr {
29 display: table;
30 width: 100%;
31 table-layout: fixed;
32 }
33 /*關鍵設定：滾動條預設寬度是16px 將thead的寬度減16px*/
34 table thead {
35 width: calc( 100% - 1em)
36 }
37
38
39 table thead th {
40 background: #ccc;
41 }
42
43 </style>
44 </head>
45
46 <body>
47 <table width="80%" border="1">
48 <thead>
49 <tr>
50 <th>姓名</th>
51 <th>年齡</th>
52 <th>出生年月</th>
53 <th>手機號碼</th>
54 <th>單位</th>
55 </tr>
56 </thead>
57 <tbody>
58 <tr>
59 <td>張三</td>
60 <td>18</td>
61 <td>1990-9-9</td>
62 <td>13682299090</td>
63 <td>阿里巴巴</td>
64 </tr>
65 <tr>
66 <td>李四</td>
67 <td>18</td>
68 <td>1990-9-9</td>
69 <td>13682299090</td>
70 <td>阿里巴巴與四十大盜</td>
71 </tr>
72 <tr>
73 <td>王五</td>
74 <td>18</td>
75 <td>1990-9-9</td>
76 <td>13682299090</td>
77 <td>騰訊科技</td>
78 </tr>
79 <tr>
80 <td>孟想</td>
81 <td>18</td>
82 <td>1990-9-9</td>
83 <td>13682299090</td>
84 <td>瀏陽河就業</td>
85 </tr>
86 </tbody>
87 </table>
88 </body>
89
90 </html>
效果：
表格外圍上下邊框、及題頭下邊框用實線顯示，列表中資料邊框以虛線顯示，但是始終不能實現。後經一個下午的努力，終於實現，現將實現方法貼出。
一、實現步驟
1、對列表、表頭、行分別使用樣式進行控制；
2、對列表，設定border-collapse為collapse，然後設定border-top-style,border-top-width,border-bottom-style,border-bottom-width屬性；
3、對錶頭及行，均設定border-bottom-style,border-bottom-width屬性，但border-bottom-style屬性值不同，表頭為solid（實線），行為dotted（虛線，及點畫線）；
二、程式碼
1、demo.html原始碼
<html>
<head>
<title>table外圍邊框樣式設定demo</title>
<!-- 頁面樣式 -->
<link rel="stylesheet" href="table.css" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
var jquery = $.noConflict();
jquery(document).ready(function(){
// 為頁面各元素新增樣式
jquery('.table_list').addClass('list');
jquery('.table_list tbody tr').addClass('dotted');
});
</script>
</head>
<body>
<table class="table_list">
<thead>
<tr>
<th><nobr>A</nobr></th>
<th><nobr>B</nobr></th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
</tr>
</tbody>
</table>
</body>
</html>
二、table.css原始碼（為作區分，我將表頭的底邊框線設定為紅色）
table.list {
border-collapse: collapse;
border-top-style: solid;
border-top-color: #000000;
border-top-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
font-size: 15px;
}
tr.dotted {
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: #000000;
}
th {
border-bottom: 1px solid #FF0000;
}
1、table重置的兩個屬性：
①border-collapse: collapse; /* 為表格設定合併邊框模型 */
②border-spacing: 0; /* 設定在表格中的單元格之間出現的間距為0 */
程式碼：
<div class="fz">
<div style="width: 600px;" class="bg-grey p10">
<table class="bg-white">
<tr>
<th>序號</th>
<th>開始時間</th>
<th>結束時間</th>
<th>備註</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>2014/8/2</td>
<td>2015/1/1</td>
<td>時間都去哪兒了</td>
<td><a href="#">編輯</a></td>
</tr>
</table>
</div>
</div>
當只重置了td,th{padding:0} 沒有設定邊框的效果
設定td{ border:1px solid #ff4136;}的效果
設定table { border-collapse: collapse; border-spacing: 0; }的效果
2、單行溢位點點顯示
.ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
幾個必要條件是：
①一定要設定元素的寬度。
②white-space: nowrap; white-space 屬性設定如何處理元素內的空白。nowrap 文字不會換行，文字會在在同一行上繼續，直到遇到 <br> 標籤為止。（防止文字往下撐開；即使你定義了高度，省略號也不會出現，多餘的文字會被剪裁掉。）
③overflow: hidden; （防止文字橫向撐開）
④text-overflow: ellipsis; ellipsis 當物件內文字溢位時顯示省略標記（...）
3、表格的寬度設定
td{ border:1px solid #ff4136;}
.title{ width: 100px;}
.kaiyao{ width: 200px;}
.time{ width: 120px;}
<div class="fz">
<div style="width: 800px;" class="bg-grey p10">
<table class="bg-white pctW">
<tr>
<th class="title">標題</th>
<th class="kaiyao">概要</th>
<th class="time">時間</th>
</tr>
<tr>
<td>單行點點點顯示</td>
<td>據說Chrome34+支援響應式圖片，就是直接<img>標籤上使用特定屬性，就可以實現圖片自動的響應式獲取，大夥可以試試~</td>
<td>2014-04-09 23:51</td>
</tr>
<tr>
<td>連續字元換行</td>
<td>zheduanzhongwenpinyinzhemechangwojiubuxingbuhuanhangyaobuliugezhongzizhileidemeirenfanyingjiusuanle</td>
<td>2014-04-09 23:53</td>
</tr>
</table>
</div>
</div>
執行效果：
問題：雖然為td設定了寬度，但因為單元格的流動性，使文字不存在溢位效果。而且表格的寬度是跟隨單元格內容多少自動計算尺寸。
解決辦法：新增
table{ table-layout: fixed;}
效果：
table-layout: fixed的作用在於，讓表格佈局固定。
存在問題：中文不會溢位，英文溢位?表格設定的寬度仍不起作用？
解決：為“概要”的兩個單元格分別新增.ell 和.bk樣式
.cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }
.bk { word-wrap: break-word; }
執行效果：
存在問題：表格設定的寬度仍不起作用？。經計算，每個td都設定寬度的情況，單元格的實際寬度是按table寬度的比例計算。
例如：table的寬度為800px。 td的寬度分別為100px 200px 100px。在table-layout:fixed情況下。即為800的 1:2:1比例
實際td的寬度為：200px，400px，200px。如不想按比例計算，可以如下解決方案：
解決：刪除表格最後一個單元格即“時間”引用的寬度限制class “.time”
效果：
“標題”和“概要”的寬度即為設定的100px和200px；
總結：
（1）要想設定表格的寬度，其必然要新增的屬性是table-layout: fixed; 若沒有該屬性，即便設定了單元格的寬度.ell 和.bk也不會起作用。
（2）添加了table-layout: fixed屬性後，①單元格的寬度用百分比表示。②單元格的寬度用px表示的時候，最後一個單元格不要設定寬度。
4、雙欄自適應cell部分連續英文符換行
/*雙欄自適應cell部分連續英文符換行*/
.cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }
注意跟普通的浮動不一樣，浮動是環繞，這個是雙欄。
程式碼：
.cell{ display: table-cell; *display: inline-block;}
<div class="fz">
<div style="width: 600px;" class="bg-grey p10">
<div>
<img src=" images/xxx.jpg" class="l p10" width="100">
<div class="cell">
<p class="cell_bk">
1977年的今天，28歲的拉齊奧中場球員Luciano Re Cecconi和兩個朋友走入羅馬的一家珠寶店。不知為何，他突然想來個惡搞玩笑。進入珠寶店後他就大喊，"別動！打劫！"他隨後、也是最後的兩句話是在珠寶店主衝出開槍命中他後說的，"It's a joke！It's a Joke！"30分鐘後，他死了。
<br/><br/>
<span>//zxx:我xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<h3>無處理</h3>
</p>
</div>
</div>
</div>
</div>
效果：（相容各瀏覽器）
當設定圖片img的width為200的效果
注意：只能是兩欄效果，三欄時ie6/7瀏覽器有問題。
對比float可以可以實現兩欄效果，只是當圖片寬度改變的時候不是自適應，需同時改變右邊div的padding-left的值
<img src=" images/xxx.jpg" class="l p10" width="200">
<div style="padding-left: 220px;">
<p class="cell_bk">
。。。。。。。
table 設定表格有滾動條。
少說多做，程式碼中有註釋：
1 <!DOCTYPE HTML>
2 <html>
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 <title>設定表格有滾動條</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 }
12
13 table {
14 /*設定相鄰單元格的邊框間的距離*/
15 border-spacing: 0;
16 /*表格設定合併邊框模型*/
17 border-collapse: collapse;
18 text-align: center;
19 }
20 /*關鍵設定 tbody出現滾動條*/
21 table tbody {
22 display: block;
23 height: 80px;
24 overflow-y: scroll;
25 }
26
27 table thead,
28 tbody tr {
29 display: table;
30 width: 100%;
31 table-layout: fixed;
32 }
33 /*關鍵設定：滾動條預設寬度是16px 將thead的寬度減16px*/
34 table thead {
35 width: calc( 100% - 1em)
36 }
37
38
39 table thead th {
40 background: #ccc;
41 }
42
43 </style>
44 </head>
45
46 <body>
47 <table width="80%" border="1">
48 <thead>
49 <tr>
50 <th>姓名</th>
51 <th>年齡</th>
52 <th>出生年月</th>
53 <th>手機號碼</th>
54 <th>單位</th>
55 </tr>
56 </thead>
57 <tbody>
58 <tr>
59 <td>張三</td>
60 <td>18</td>
61 <td>1990-9-9</td>
62 <td>13682299090</td>
63 <td>阿里巴巴</td>
64 </tr>
65 <tr>
66 <td>李四</td>
67 <td>18</td>
68 <td>1990-9-9</td>
69 <td>13682299090</td>
70 <td>阿里巴巴與四十大盜</td>
71 </tr>
72 <tr>
73 <td>王五</td>
74 <td>18</td>
75 <td>1990-9-9</td>
76 <td>13682299090</td>
77 <td>騰訊科技</td>
78 </tr>
79 <tr>
80 <td>孟想</td>
81 <td>18</td>
82 <td>1990-9-9</td>
83 <td>13682299090</td>
84 <td>瀏陽河就業</td>
85 </tr>
86 </tbody>
87 </table>
88 </body>
89
90 </html>
效果：
表格外圍上下邊框、及題頭下邊框用實線顯示，列表中資料邊框以虛線顯示，但是始終不能實現。後經一個下午的努力，終於實現，現將實現方法貼出。
一、實現步驟
1、對列表、表頭、行分別使用樣式進行控制；
2、對列表，設定border-collapse為collapse，然後設定border-top-style,border-top-width,border-bottom-style,border-bottom-width屬性；
3、對錶頭及行，均設定border-bottom-style,border-bottom-width屬性，但border-bottom-style屬性值不同，表頭為solid（實線），行為dotted（虛線，及點畫線）；
二、程式碼
1、demo.html原始碼
<html>
<head>
<title>table外圍邊框樣式設定demo</title>
<!-- 頁面樣式 -->
<link rel="stylesheet" href="table.css" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
var jquery = $.noConflict();
jquery(document).ready(function(){
// 為頁面各元素新增樣式
jquery('.table_list').addClass('list');
jquery('.table_list tbody tr').addClass('dotted');
});
</script>
</head>
<body>
<table class="table_list">
<thead>
<tr>
<th><nobr>A</nobr></th>
<th><nobr>B</nobr></th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
</tr>
</tbody>
</table>
</body>
</html>
二、table.css原始碼（為作區分，我將表頭的底邊框線設定為紅色）
table.list {
border-collapse: collapse;
border-top-style: solid;
border-top-color: #000000;
border-top-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
font-size: 15px;
}
tr.dotted {
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: #000000;
}
th {
border-bottom: 1px solid #FF0000;
}