CSS đệm cho TD đơn bên trong một bảng

Question

Tôi có một bảng, được xây dựng như thế này:

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

Bây giờ vấn đề là trong hàng cuối cùng. Toàn bộ hàng có chiều cao được đặt là 100px, vì vậy có rất nhiều phòng trong TD. Trong TD cuối cùng tôi muốn thiết lập một đệm cá nhân, vì vậy chỉ những nội dung "11" được đệm từ trên xuống:

.eleven { 
    padding-top:15px; 
} 

Thiết điều này gây ra vấn đề - TD đầu tiên trong hàng này cũng được padding-top : 10px; Tại sao và làm thế nào để làm cho chỉ có một đệm thứ hai?

Answer 1

Ok, tôi đã tìm ra nguyên nhân gây ra sự cố. Đó là một mục nhập trong đoạn mã html5-css-reset nhỏ mà tôi sử dụng:

vertical-align:baseline; 

được gán chung cho hầu hết các thành phần phổ biến. Có ý nghĩ đó, bây giờ mọi thứ hoạt động như dự định.

Answer 2

Tại sao bạn không quấn nội dung bạn muốn được đệm vào một <div> (trên đó bạn sẽ áp dụng kiểu đệm) và đặt <div> vào <td>?

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