爲什麼不將填充應用於表格元素？

這更像是「告訴我爲什麼它不起作用」而不是「幫我修復它」的問題。如果我嘗試將填充應用於表格中的thead或tr元素，則不起作用。填充的唯一方法是將其直接應用於th或td元素。這是爲什麼？是否有一種簡單的方法可以將填充應用於整個thead或tr或將其添加到th和td唯一的選項？爲什麼不將填充應用於表格元素？

<table> 
    <thead> 
     <tr> 
      <th>Destination</th> 
      <th>Size</th> 
      <th>Home Value</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>test 1</td> 
      <td>test 2</td> 
      <td>test 3</td> 
     </tr> 
    </tbody> 
</table>

注意填充在pad上的10px。

table { 
    width: 100%; 
} 

thead { 
    text-align: left; 
    background-color: yellow; 
    padding: 10px; 
}

http://jsfiddle.net/5VQB7/

來源

2013-03-24 Adam Robertson

theads和TRS不能定義填充。你期望它看起來像什麼？ – BoltClock 2013-03-24 06:55:23

我不太瞭解這種方法。你最終得到的是任何'TD'的最大填充值，不管其他值如何，所以你可以在'TD'上指定多個不同的填充值，這是無稽之談。在我看來，它似乎更符合邏輯地應用於「TR」。 – nicodemus13 2014-01-14 22:01:14

http://www.w3.org/TR/CSS2/box.html#propdef-padding

'填充'

適用於：所有元素除外表列的基團，表頭的基團，表尺基團，表-row，table-column-group and table-column

來源

2013-03-24 06:57:39

THEAD不支持CSS屬性「填充」如果你需要在THEAD應用CSS然後CSS修改，如：

thead tr th { 
    text-align: left; 
    background-color: yellow; 
    padding: 10px; 
}

或者

th { 
    text-align: left; 
    background-color: yellow; 
    padding: 10px; 
}

來源

2013-03-24 06:54:54 imsyedahmed

嘗試改爲將填充放置在th元素中。通常，您要根據情況向th或td元素添加填充。

thead th { 
    padding: 10px; 
}

來源

2013-03-24 06:54:57 Aiias

劃過左邊&對於td或th也是如此。

但是，如果填充頂部爲&填充底部，則要求td（或th）增加它的高度。那麼兄弟姐妹呢？你期望會發生什麼？

因此，對於填充頂部或底部工作，您應用於它的父級，這是行的單元格。

來源

2013-03-24 06:56:35 loxxy

，因爲標籤喜歡和他們不是爲了填充表，而是包含其他元素。讓我們清楚：如果你想添加標題到你的表中，你不會插入它，而是你將它添加到裏面，並且相同的，如果你想填充表中的數據，你將需要插入它們裏面

我希望這個答案澄清你的問題CSS2.1的

來源

2013-03-24 07:01:58

相關部分：Tables

請各位看看下面這張圖：table layers。 padding只能應用於整個table或th和td單元格afaik。不要忘記caption也。其他圖層在各種表格佈局算法中已經足夠複雜，因此無法應用填充^^

下面是一個小提琴http://jsfiddle.net/QB97d/1/，顯示您可以使用的其他屬性。

border-spacing: 8px 10px;是像餘量一個表的每個單元周圍。擺脫它與border-collapse: collapse;
將觸發完全不同的算法（「呈現寬度，我告訴你，不關心的內容在每個單元的相對量了」）
border是另一個周圍的元素給空間，圍繞padding
empty-cells: hide方式可以觸發特殊行爲

在這個小提琴未顯示：

與選擇播放選擇的4個角落IE9 +一個表中的每個角落THEAD元素和未知類型的細胞（我會讓你找到4個邊緣;））：
- thead th:first-child, thead td:first-child，
- thead th:last-child, thead td:last-child，
- tbody:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child
- tbody:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child
box-sizing: border-box（和它的供應商前綴），用於計算單元寬度考慮到填充和邊框寬度（如IE6的怪癖模式一樣，哦諷刺...）

來源

2013-03-24 09:48:26 FelipeAls

行爲可以追溯到IE5，這是在IE6和更新版本中以奇特模式模擬的內容。 – BoltClock 2013-03-24 09:51:27

謝謝@BoltClock。由於IE6具有*兩種*模式，因此很有意義 – FelipeAls 2013-03-24 09:55:58

爲什麼不將填充應用於表格元素？

回答

相關問題