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

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

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+支持響應式圖片，就是直接&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表示的時候，最后一個單元格不要設置寬度。

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"> 
。。。。。。。