一个 html 表格单元格中的单元格填充

Posted 2023-03-05

【中文标题】一个 html 表格单元格中的单元格填充

【英文标题】：Cellpadding in one html table cell

【发布时间】：2010-11-12 21:57:39

【问题描述】：

是否可以只在一个单元格中而不是在整个 html 表格中进行单元格填充？

【参考方案1】：

只需使用 CSS 设置单元格样式：

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

【参考方案2】：

如果您希望邮件在电子邮件程序（尤其是 Outlook）中保持一致，则有时很难在电子邮件样式中使用 CSS 填充。 如果您不想使用 css，解决方法是在要应用填充的单元格中放置一个包含一行和一个单元格的全新表格。然后将填充应用于该“单单元”表。

在问题中给出的示例中，这将变为：

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

【讨论】：

是的。这是我们需要硬着头皮解决的问题。

【参考方案3】：

很遗憾，如果您指的是使用 <table cellpadding="0">，则不是，因为这是一个表范围的设置。如果您希望仅将填充应用于一个单元格，则必须添加一个类并以这种方式为其分配一个 padding 值。

【参考方案4】：

你可以试试这个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;