在一个html表格单元格中的Cellpadding

时间:2009-07-22 07:37:53

标签: html html-table cell

是否可以在一个单元格中对整个html表进行单元格填充?

4 个答案:

答案 0 :(得分:29)

使用CSS设置单元格样式:

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

答案 1 :(得分:15)

如果您希望邮件在电子邮件程序(尤其是Outlook)中保持一致,那么在用于样式化电子邮件时,有时很难使用css实现填充。 如果您不想使用css,则解决方法是在要添加填充的单元格中放置一个包含一行和一个单元格的全新表。然后将填充应用于'one celled'表。

在问题中给出的例子中,这将成为:

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

答案 2 :(得分:1)

不幸的是,如果您指的是使用<table cellpadding="0">,那么这是一个表格范围的设置。如果要将填充仅应用于一个单元格,则必须添加一个类并以此方式为其指定padding值。

答案 3 :(得分: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;
}

使用课程&#39; splcell&#39;我们可以设计单个细胞的样式。

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