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;
}
table--邊框樣式設置