Cellpadding na tabela célula uma html
-
18-09-2019 - |
Pergunta
É possível ter o preenchimento da célula em apenas um celular contra toda a tabela html?
Solução
estilo Apenas a célula usando CSS:
<table border='1'>
<tr>
<td style="padding: 50px;">cell1</td>
</tr>
<tr>
<td>cell2</td>
</tr>
</table>
Outras dicas
Para uso em denominar um e-mail às vezes é difícil de alcançar preenchimento com css se quiser que o e-mail para ser consistente nos programas de e-mail, especialmente Outlook. Se você não quiser usar css, uma solução alternativa é colocar toda uma nova tabela com uma linha e uma célula na célula que você deseja aplicar padding para. Em seguida, aplique o preenchimento para que 'um unicelular' tabela.
No exemplo dado na questão esta se tornaria:
<table border='1'>
<tr>
<td>
<table cellpadding="50">
<tr>
<td>cell1</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>cell2</td>
</tr>
</table>
Infelizmente não, se você está se referindo ao uso de <table cellpadding="0">
, como é que uma configuração de todo o mesa. Se você quiser estofo para ser aplicado a apenas uma célula, você vai ter que adicionar uma classe e atribuir-lhe um valor padding
dessa forma.
Você pode tentar este css.
Tabela usando 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;
}
usando o 'splcell' class podemos denominar a célula individual.
.splcell{
background:red;
color:#fff;
font-weight:bold;
text-align:center;
}