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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1163657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 00:21:13  来源:igfitidea点击:

Cellpadding in one html table cell

htmlhtml-tablecell

提问by leora

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

与整个 html 表格相比,是否可以仅在一个单元格中填充单元格?

回答by Curtis Tasker

Just style the cell using CSS:

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

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

回答by C.A. Vuyk

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,一种解决方法是在要应用填充的单元格中放置一个包含一行和一个单元格的全新表格。然后将填充应用于该“一个单元格”表。

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>

回答by Aswin KV

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

回答by Bryan Veloso

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 paddingvalue that way.

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