Cellpadding en una celda de una tabla HTML
-
18-09-2019 - |
Pregunta
¿Es posible tener el relleno de celdas en un solo celular frente a toda la tabla html?
Solución
Sólo el estilo de la célula usando CSS:
<table border='1'>
<tr>
<td style="padding: 50px;">cell1</td>
</tr>
<tr>
<td>cell2</td>
</tr>
</table>
Otros consejos
Para su uso en labrar un correo electrónico a veces es difícil de lograr acolchado con CSS si desea que el correo sea consistente a través de programas de correo electrónico, especialmente de Outlook. Si no desea utilizar CSS, una solución es poner una mesa totalmente nuevo con una fila y una celda en la celda que desea aplicar el relleno a. A continuación, aplicar el relleno a la mesa 'una célula'.
En el ejemplo dado en la pregunta esto se convertiría en:
<table border='1'>
<tr>
<td>
<table cellpadding="50">
<tr>
<td>cell1</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>cell2</td>
</tr>
</table>
Por desgracia no, si usted se refiere a la utilización de <table cellpadding="0">
, ya que es una configuración de todo mesa. Si quieres relleno para ser aplicado a una sola célula, que tendrá que añadir una clase y asignarle un valor padding
de esa manera.
Puede probar esto css.
tabla 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;
}
utilizando la clase 'splcell' que puede estilo de la célula individual.
.splcell{
background:red;
color:#fff;
font-weight:bold;
text-align:center;
}