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

时间:2022-12-13 22:21:32

Is it possible to have cell padding in just one cell versus the whole html table?

是否可以在一个单元格中使用单元格填充而不是整个html表格?

4 个解决方案

#1


28  

Just style the cell using CSS:

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

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

#2


13  

For use in styling an email it is sometimes hard to achieve padding with css if you want the mail to be consistent across email programs, especially Outlook. If you don't want to use css, a workaround is to put a whole new table with one row and one cell in the cell that you want to apply padding to. Then apply the padding to that 'one celled' table.

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

In the example given in the question this would become:

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

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

#3


1  

Unfortunately not, if you're referring to using <table cellpadding="0">, as that is a table-wide setting. If you want padding to be applied to just one cell, you'll have to add a class and assign it a padding value that way.

不幸的是,如果您指的是使用

,因为这是一个表范围的设置。如果要将填充仅应用于一个单元格,则必须添加一个类并以此方式为其指定填充值。

#4


1  

You can try this css.

你可以尝试这个CSS。

Table using div

表使用div

HTML

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

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

using the class 'splcell' we can style the individual cell.

使用'splcell'类,我们可以设置单个单元格的样式。

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

#1


28  

Just style the cell using CSS:

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

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

#2


13  

For use in styling an email it is sometimes hard to achieve padding with css if you want the mail to be consistent across email programs, especially Outlook. If you don't want to use css, a workaround is to put a whole new table with one row and one cell in the cell that you want to apply padding to. Then apply the padding to that 'one celled' table.

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

In the example given in the question this would become:

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

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

#3


1  

Unfortunately not, if you're referring to using <table cellpadding="0">, as that is a table-wide setting. If you want padding to be applied to just one cell, you'll have to add a class and assign it a padding value that way.

不幸的是,如果您指的是使用

,因为这是一个表范围的设置。如果要将填充仅应用于一个单元格,则必须添加一个类并以此方式为其指定填充值。

#4


1  

You can try this css.

你可以尝试这个CSS。

Table using div

表使用div

HTML

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

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

using the class 'splcell' we can style the individual cell.

使用'splcell'类,我们可以设置单个单元格的样式。

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