一个HTML表格单元格中的Cellpadding

19

在 HTML 表格中,是否有可能仅对单个单元格设置单元格内边距,而不是整个表格?

4个回答

29

只需要使用 CSS 样式化单元格:

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

21

在电子邮件的样式设计中,如果你想要保持邮件在各个邮箱程序中视觉上的一致性,使用CSS实现内边距有时会很困难,尤其是在Outlook中。如果不想使用CSS,一个解决方法是在需要应用内边距的单元格中添加一个完整的新表格,其中只有一行和一个单元格。然后将内边距应用于这个“只有一个单元格”的表格。

在问题所给出的示例中,这将变为:

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

1
是的,这就是我们需要采取的解决方案。 - Siva-Dev-Wizard

1
您可以尝试使用这个CSS。

使用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;
}

使用类名为“splcell”的样式可以对单个单元格进行样式设置。
.splcell{
       background:red;
       color:#fff;
       font-weight:bold;
       text-align:center;
    } 

1
很遗憾,如果您指的是使用<table cellpadding="0">,那么它是整个表格的设置。如果您想要对单个单元格应用内边距,您需要添加一个类并分配一个padding 值。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接