1、table重置的兩個(gè)屬性：
①border-collapse: collapse; /* 為表格設(shè)置合并邊框模型 */
②border-spacing: 0; /* 設(shè)置在表格中的單元格之間出現(xiàn)的間距為0 */
代碼：
<div class="fz">
<div style="width: 600px;" class="bg-grey p10">
<table class="bg-white">
<tr>
<th>序號(hào)</th>
<th>開(kāi)始時(shí)間</th>
<th>結(jié)束時(shí)間</th>
<th>備注</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>2014/8/2</td>
<td>2015/1/1</td>
<td>時(shí)間都去哪兒了</td>
<td><a href="#">編輯</a></td>
</tr>
</table>
</div>
</div>
當(dāng)只重置了td,th{padding:0} 沒(méi)有設(shè)置邊框的效果
設(shè)置td{ border:1px solid #ff4136;}的效果
設(shè)置table { border-collapse: collapse; border-spacing: 0; }的效果
2、單行溢出點(diǎn)點(diǎn)顯示
.ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
幾個(gè)必要條件是：
①一定要設(shè)定元素的寬度。
②white-space: nowrap; white-space 屬性設(shè)置如何處理元素內(nèi)的空白。nowrap 文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。（防止文字往下?lián)伍_(kāi)；即使你定義了高度，省略號(hào)也不會(huì)出現(xiàn)，多余的文字會(huì)被剪裁掉。）
③overflow: hidden; （防止文字橫向撐開(kāi)）
④text-overflow: ellipsis; ellipsis 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）
3、表格的寬度設(shè)置
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">標(biāo)題</th>
<th class="kaiyao">概要</th>
<th class="time">時(shí)間</th>
</tr>
<tr>
<td>單行點(diǎn)點(diǎn)點(diǎn)顯示</td>
<td>據(jù)說(shuō)Chrome34+支持響應(yīng)式圖片，就是直接<img>標(biāo)簽上使用特定屬性，就可以實(shí)現(xiàn)圖片自動(dòng)的響應(yīng)式獲取，大伙可以試試~</td>
<td>2014-04-09 23:51</td>
</tr>
<tr>
<td>連續(xù)字符換行</td>
<td>zheduanzhongwenpinyinzhemechangwojiubuxingbuhuanhangyaobuliugezhongzizhileidemeirenfanyingjiusuanle</td>
<td>2014-04-09 23:53</td>
</tr>
</table>
</div>
</div>
運(yùn)行效果：
問(wèn)題：雖然為td設(shè)置了寬度，但因?yàn)閱卧竦牧鲃?dòng)性，使文字不存在溢出效果。而且表格的寬度是跟隨單元格內(nèi)容多少自動(dòng)計(jì)算尺寸。
解決辦法：添加
table{ table-layout: fixed;}
效果：
table-layout: fixed的作用在于，讓表格布局固定。
存在問(wèn)題：中文不會(huì)溢出，英文溢出?表格設(shè)定的寬度仍不起作用？
解決：為“概要”的兩個(gè)單元格分別添加.ell 和.bk樣式
.cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }
.bk { word-wrap: break-word; }
運(yùn)行效果：
存在問(wèn)題：表格設(shè)定的寬度仍不起作用？。經(jīng)計(jì)算，每個(gè)td都設(shè)定寬度的情況，單元格的實(shí)際寬度是按table寬度的比例計(jì)算。
例如：table的寬度為800px。 td的寬度分別為100px 200px 100px。在table-layout:fixed情況下。即為800的 1:2:1比例
實(shí)際td的寬度為：200px，400px，200px。如不想按比例計(jì)算，可以如下解決方案：
解決：刪除表格最后一個(gè)單元格即“時(shí)間”引用的寬度限制class “.time”
效果：
“標(biāo)題”和“概要”的寬度即為設(shè)定的100px和200px；
總結(jié)：
（1）要想設(shè)置表格的寬度，其必然要添加的屬性是table-layout: fixed; 若沒(méi)有該屬性，即便設(shè)定了單元格的寬度.ell 和.bk也不會(huì)起作用。
（2）添加了table-layout: fixed屬性后，①單元格的寬度用百分比表示。②單元格的寬度用px表示的時(shí)候，最后一個(gè)單元格不要設(shè)置寬度。
4、雙欄自適應(yīng)cell部分連續(xù)英文符換行
/*雙欄自適應(yīng)cell部分連續(xù)英文符換行*/
.cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }
注意跟普通的浮動(dòng)不一樣，浮動(dòng)是環(huán)繞，這個(gè)是雙欄。
代碼：
.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歲的拉齊奧中場(chǎng)球員Luciano Re Cecconi和兩個(gè)朋友走入羅馬的一家珠寶店。不知為何，他突然想來(lái)個(gè)惡搞玩笑。進(jìn)入珠寶店后他就大喊，"別動(dòng)！打劫！"他隨后、也是最后的兩句話是在珠寶店主沖出開(kāi)槍命中他后說(shuō)的，"It's a joke！It's a Joke！"30分鐘后，他死了。
<br/><br/>
<span>//zxx:我xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
<h3>無(wú)處理</h3>
</p>
</div>
</div>
</div>
</div>
效果：（兼容各瀏覽器）
當(dāng)設(shè)置圖片img的width為200的效果
注意：只能是兩欄效果，三欄時(shí)ie6/7瀏覽器有問(wèn)題。
對(duì)比f(wàn)loat可以可以實(shí)現(xiàn)兩欄效果，只是當(dāng)圖片寬度改變的時(shí)候不是自適應(yīng)，需同時(shí)改變右邊div的padding-left的值
<img src=" images/xxx.jpg" class="l p10" width="200">
<div style="padding-left: 220px;">
<p class="cell_bk">
到此這篇關(guān)于Table自適應(yīng)以及溢出的一些設(shè)置詳解的文章就介紹到這了,更多相關(guān)Table自適應(yīng)以及溢出內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
