【CSS】Table樣式

一、table td的寬度詳解

Table只有Table的寬度是可以設置的，並且各個瀏覽器理解一致

• 原則上應該將table的寬度設置成一個固定的值，而不應該設置成一個根據屏幕變化的值
• Table的寬度為600px,Table的td所有寬度總和不到600px,瀏覽器會自動按照td的寬度的比例算出寬度

 <table style="width: 600px;border-collapse: collapse;border:1px solid" >
            <tr>
                <td style="width: 200px;">我是200px</td>
               <td style="width: 200px;">我也是200px</td>
            </tr>
        </table>

運行結果：兩個td都是300px;

• Table的寬度為600px,前兩個td的寬度已經為600px,那么第三個td的寬度沒有指定，這樣的話第三個td的寬度是根據內容出現寬度的，然后前兩個再按照比列計算、

        前兩個td小於table寬度，那么最后一個td就起到補全的作用

<table style="width: 600px;border-collapse: collapse;border:1px solid">
        <tr>
            <td style="width: 300px;">我是200px</td>
            <td style="width: 300px;">我也是200px</td>
            <td>我是根據內容的</td>
        </tr>
    </table>

• 如果一行文字太多，可以在<td>的樣式中加入word-break: break-all（強制換行）

 

二、兩個table水平並排顯示

　　可以在外面再套個一行兩列的大表格，左右兩個單元格里再放表格

<table>
<tr>
<td><table>....</table><td>
<td><table>....</table><td>
<td><table>....</table></td> //同樣可以設置一行3個表以上的
</tr>
</table>

 

三、Table中雙虛線

<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse">
            <tbody>
                <tr>
                    <td style="border-bottom: black 3px double; width: 40%">
                        收費項目</td>
                    <td style="border-bottom: black 3px double; width: 20%">
                        價格</td>
                    <td style="border-bottom: black 2px double; width: 20%">
                        每日數量</td>
                    <td style="border-bottom: black 2px double;width: 20%">
                        港幣$</td>
                </tr>
<!--StartHotelExpert-->                <tr>
                    <td>
                        {FeeName}</td>
                    <td>
                        {Price}</td>
                    <td>
                        {Quantity}</td>
                    <td align="right">
                        {TotalPrice}</td>
                </tr>
<!--EndHotelExpert-->                <tr>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                    <td style="border-bottom: black 3px double; text-align: right; border-top: black 2px double">
                        <strong>{GrandTotal}</strong></td>
                </tr>
            </tbody>
        </table>

　　在td中設置border，<td style="border-bottom: black 3px double; width: 40%">

　　注意：雙虛線時需要設置為3px，而2px會疊在一起，沒有效果。

 

四、Table中tr間距的設置

　　tr、td設置margin 無效；tr 設置padding無效、td設置padding有效

　　table中的tr的默認display:table-row，雖然可以修改為display：block但是就失去了tr特有的顯示效果，如(td自動對齊)；

解決方案：

css的兩個屬性：

border-collapse:collapse / separate  

border-spacing:10px 10px;      // 設置相鄰單元格的邊框間的距離（僅用於“邊框分離”模式）

需要用border-collapse & border-spacing聯合控制tr的間距.

• border-collapse 屬性設置表格的邊框是否被合並為一個單一的邊框，還是象在標准的 HTML 中那樣分開顯示。

Separate: 默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。

Collapse: 如果可能，邊框會合並為一個單一的邊框。會忽略 border-spacing 和empty-cells 屬性。

•  border-spacing: 該屬性指定分隔邊框模型中單元格邊界之間的距離。在指定的兩個長度值中，第一個是水平間隔，第二個是垂直間隔。除非 border-collapse 被設置為 separate，否則將忽略這個屬性。盡管這個屬性只應用於表，不過它可以由表中的所有元素繼承。

如：<table style="border-collapse:separate; border-spacing:50px 10px;">

    <tr></tr></table>

大致效果如下

五、Table中列太多支持左右滾動

<div id="divList" style="overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling: touch;width: 100%;">
    <table class="CommonTable" id="orderlist" style="margin-bottom: 10px; left: 0;table-layout:fixed;">

white-space屬性指定元素內的空白怎樣處理：

　　nowrap：文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。

overflow-x 屬性規定是否對內容的左/右邊緣進行裁剪 - 如果溢出元素內容區域的話：

　　auto：如果溢出框，則應該提供滾動機制。

table-layout屬性用來顯示表格單元格、行、列的算法規則：

　　默認是auto，可以改為fixe。

固定表格布局：

固定表格布局與自動表格布局相比，允許瀏覽器更快地對表格進行布局。

在固定表格布局中，水平布局僅取決於表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的內容無關。

通過使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格。

自動表格布局：

在自動表格布局中，列的寬度是由列單元格中沒有折行的最寬的內容設定的。

此算法有時會較慢，這是由於它需要在確定最終的布局之前訪問表格中所有的內容。