單TD CSS填充表

我有一個表，像這樣的構造中：單TD CSS填充表

<table> 
<tr> <td>1</td> <td>2</td> <td rowspan="4">3</td></tr> 
<tr> <td>4</td> <td>5</td>      </tr> 
<tr> <td>6</td> <td>7</td>      </tr> 
<tr> <td>8</td> <td>9</td>      </tr> 
<tr height="100"><td colspan="2">10</td><td class="eleven">11</td> </tr> 
</table>

現在的問題是最後一行中。整行的高度設置爲100px，因此TD中有很多空間。在最後TD我想成立一個單獨的填充，所以只有內容「11」是從頂部填充：

.eleven { 
    padding-top:15px; 
}

設置這個原因導致的問題 - 這行的第一個TD也得到填充頂：10px的;爲什麼以及如何只製作第二個填充物？

來源

2012-02-09 wiktus239

你的代碼似乎在工作http://jsfiddle.net/rdQvZ/。問題是什麼？？ – 2012-02-09 09:17:24

你可能想檢查你的CSS，你的其他CSS代碼。表和.eleven CSS是好的 – XepterX 2012-02-09 09:17:44

你應該創建一個jsFiddle來說明你的問題。也許還需指定您遇到這些問題的瀏覽器？ – kapa 2012-02-09 21:36:23

好的，我發現是什麼導致了這個問題。這是我使用的一個html5-css-reset片段中的一個條目：

vertical-align:baseline;

一般分配給大多數常用元素。考慮到這一點，現在一切正常。

來源

2012-02-11 19:50:20 wiktus239

爲什麼不把你想要填充的內容包裝到一個<div>（你將在其上應用填充樣式）並將該<div>放入<td>？

<td> 
    <div style="padding-top: 15px;"> 
     Content 
    </div> 
</td>

來源

2012-02-09 09:38:49

由於您不需要額外的div，因此您不需要使用它們，並且絕對不會爲這些div應用內聯樣式。 – 2012-02-11 19:54:21

您可以將div的位置放在任何需要的位置，即「分割」。我只是簡單介紹了內聯樣式選項，向他展示瞭如何使用最少的代碼完成它。顯然他知道如何寫風格類，他可以弄清楚如何區分它們。 Div在未來給他更多的靈活性。如果他從一個基於桌子的設計切換到另外一個，那麼Div可以保證他的安全。 – 2012-02-12 18:50:20

單TD CSS填充表

回答

相關問題