table問題彙總

　　平時要使用 table 的次數說多很少，說少很多，但每次使用一定會被幾個問題「坑」一下，因此這篇博客用來記錄下table那些「小坑」。但 table 也會有不少好用的特性，好比內容自動垂直居中，正是由於這一點，垂直居中能夠用 display: table-cell 和 vertical-align 實現，同時沒有兼容性問題。看來 table 也"還不錯"。

1、table自帶特性

　　（一）當 table 寬度設置爲定值時，td 的寬度會自動撐開，按內容長度分配各自寬度（高度同理）。即便給某個 td 設置了必定寬度，其它單元格依舊會自動分配寬度。（這一點跟flex很像）。

 .container{ width: 500px; height: 120px;
        } .container table{ width: auto; 
        }

 

 .container{ width: 500px; height: 120px;
        } .container table{ width: 100%; 
        }

　　（二）td 內的內容，不論文字、inline元素、仍是block元素都會「垂直居中」。

<tr>
    <td><span>小紅</span></td>
    <td>女</td>
    <td><div class="block"></div></td>
</tr>

table .block{ display: block; width: 10px; height: 10px; background: green;
}

 

　　　　想控制 td 內元素垂直方向上的居中方式，用 vertical-align 屬性。但要注意一點是，vertical-align 是用來設置子元素相對於父元素的居中方式的，因此該屬性要設置在父元素上，即 td 自己。（table 內的 td 默認 vertical-align：middle;）

table tr th,td{ vertical-align: top;
}

　　（三）th 標籤內的內容會自動垂直水平居中，而且字體加粗。

　　　　通常 th 是 thead 內的單元格，即表頭信息。

　　（四）table 元素是塊級元素，居中原理與塊級元素相同。

　　　　不過要注意一點是，用 display：table-cell 方法對其餘元素內的內容實現垂直居中時，元素不能夠被 display：flex 的元素包裹，不然 vertical-align 會失效。

　　（五）table 標籤每出現一次，一個 Table 對象就會被建立，Table對象中封裝了能夠對單元格、行進行直接操縱的API，不用每次都獲取標籤元素了。

2、table 的邊框問題

　　table 有個CSS屬性 border-collapse，這個屬性有兩個基本值：separate（默認值）--邊框分離，collapse -- 邊框合一。這兩個屬性稍後會提到，暫且先看看給table 中 的各個元素分別添加 border 是什麼樣。

table{ border: 1px solid black;
} table tr{ border: 1px solid red;
} table tr th,td{ border: 1px solid green;
}

　　1) 邊框分離 border-collapse: separate; 時

table{ border-collapse: separate;
}

　　　　直接給 td 加 border，會讓表格看起來有「雙層邊框」，是由於每一個單元格之間有 cellspacing 和 border-spacing。

　　2) 邊框合一 border-collapse: collapse; 時

table{ border-collapse: collapse;
}

　　　　很明顯，最後一種就是咱們最須要的那種，可是在「邊框分離」狀態下，也能夠實現相似的效果，就是邊框「粗了點」。如須要，請參照第三種方法。

　　3) 「邊框分離」模式下模擬的「邊框合一」

table{ border-collapse: separate; border: 1px solid black; border-spacing: 0; /*設置相鄰單元格的邊框間的距離（僅用於「邊框分離」模式）*/
　　/*empty-cells:hide; /*不在空單元格周圍繪製邊框*/

} table td{ border: 1px solid green;
}

　　　　這個原理就是讓 td 的邊框與 table 的邊框之間的間距變爲0，兩個 border 挨在一塊兒，看起來像一條 border 罷了。

3、table 的那些坑

• table高寬是靠內容撐開的 對margin不敏感 可用padding代替
• table自定義 width 失效時 對table使用 table-layout:fixed;
• table寬度不夠，想要單元格內換行效果時，可在單元格內使用div/p標籤包一層，給div/p標籤設置定寬，或者div/p標籤寬度100%後設置 word-break:break-all;
• table內的某一行單元格寬度和其餘行不一樣時，能夠在 tr 內嵌套 table實現
• table 中的單元格跨行、跨列（合併單元格）能夠用 td 標籤自帶的屬性：rowspan 和 colspan