Cellpadding trong một ô bảng html

Question

Có thể có ô đệm chỉ trong một ô so với toàn bộ bảng html không?

Answer 1

Chỉ cần phong cách các tế bào sử dụng CSS:

<table border='1'> 
    <tr> 
    <td style="padding: 50px;">cell1</td> 
    </tr> 
    <tr> 
    <td>cell2</td> 
    </tr> 
</table> 

Answer 2

Thật không may là không, nếu bạn đang đề cập đến việc sử dụng <table cellpadding="0">, vì đó là cài đặt toàn bảng. Nếu bạn muốn đệm chỉ được áp dụng cho một ô, bạn sẽ phải thêm một lớp và gán nó một giá trị padding theo cách đó.

Answer 3

Để sử dụng trong phong cách một email đó là đôi khi khó có thể đạt được đệm với css nếu bạn muốn thư để phù hợp giữa các chương trình thư điện tử, đặc biệt là Outlook. Nếu bạn không muốn sử dụng css, cách giải quyết là đặt một bảng hoàn toàn mới với một hàng và một ô trong ô mà bạn muốn áp dụng đệm vào. Sau đó, áp dụng padding cho bảng 'một ô' đó.

Trong ví dụ được đưa ra trong câu hỏi này sẽ trở thành:

<table border='1'> 
<tr> 
    <td> 
    <table cellpadding="50"> 
    <tr> 
    <td>cell1</td> 
    </tr> 
    </table> 
    </td> 
</tr> 
<tr> 
    <td>cell2</td> 
</tr> 
</table> 

Answer 4

Bạn có thể thử css này.

Bảng sử dụng div

HTML

<div class="divTable"> 
    <div class="divTableBody"> 
     <div class="divTableRow"> 
      <div class="divTableCell">1</div> 
      <div class="divTableCell splcell">2</div> 
      <div class="divTableCell">3</div> 
     </div> 
     <div class="divTableRow"> 
      <div class="divTableCell">4;</div> 
      <div class="divTableCell">5</div> 
      <div class="divTableCell">6;</div> 
     </div> 
    </div> 
</div> 

CSS

.divTable{ 
    display: table; 
    width: 100%; 
} 
.divTableRow { 
    display: table-row; 
} 
.divTableHeading { 
    background-color: #EEE; 
    display: table-header-group; 
} 
.divTableCell, .divTableHead { 
    border: 1px solid #999999; 
    display: table-cell; 
    padding: 3px 10px; 
} 
.divTableHeading { 
    background-color: #EEE; 
    display: table-header-group; 
    font-weight: bold; 
} 
.divTableFoot { 
    background-color: #EEE; 
    display: table-footer-group; 
    font-weight: bold; 
} 
.divTableBody { 
    display: table-row-group; 
} 
.splcell{ 
    background:red; 
    color:#fff; 
    font-weight:bold; 
    text-align:center; 
    padding: 5px; 
} 

bằng cách sử dụng lớp 'splcell' chúng ta có thể tạo kiểu các tế bào riêng lẻ.

.splcell{ 
     background:red; 
     color:#fff; 
     font-weight:bold; 
     text-align:center; 
    }