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自適應以及溢出的一些設置詳解的文章就介紹到這了,更多相關Table自適應以及溢出內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
