Table的一些設置（自適應以及溢出）

1. table的兩個屬性
2. 單行溢出點點顯示
3. 表格的寬度設置
4. 雙欄自適應連續連續英文符換行

一、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; }的效果

 二、單行溢出點點顯示

.ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

幾個必要條件是：

①必定要設定元素的寬度。

②white-space: nowrap;  white-space 屬性設置如何處理元素內的空白。nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止。（防止文字往下撐開；即便你定義了高度，省略號也不會出現，多餘的文字會被剪裁掉。）

③overflow: hidden; （防止文字橫向撐開）

④text-overflow: ellipsis;    ellipsis 當對象內文本溢出時顯示省略標記（...）

三、表格的寬度設置

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+支持響應式圖片，就是直接&lt;img&gt;標籤上使用特定屬性，就能夠實現圖片自動的響應式獲取，大夥能夠試試~</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表示的時候，最後一個單元格不要設置寬度。

四、雙欄自適應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"> 
。。。。。。。