Cellpadding в одной ячейке таблицы HTML - PullRequest
Новая
       15

Cellpadding в одной ячейке таблицы HTML

18 голосов
/ 22 июля 2009

Возможно ли заполнение ячейки только в одной ячейке по сравнению со всей HTML-таблицей?

Ответы [ 4 ]

29 голосов
/ 22 июля 2009

Просто стилизуйте ячейку с помощью CSS: 

<table border='1'>
    <tr>
    <td style="padding: 50px;">cell1</td>
    </tr>
    <tr>
    <td>cell2</td>
    </tr>
</table>
15 голосов
/ 12 августа 2014

Для использования при оформлении электронной почты иногда бывает трудно добиться заполнения с помощью css, если вы хотите, чтобы почта была согласованной для всех почтовых программ, особенно Outlook. Если вы не хотите использовать css, обходной путь - это поместить новую ячейку с одной строкой и одной ячейкой в ​​ячейку, к которой вы хотите применить заполнение. Затем примените заполнение к этой «одноклеточной» таблице.

В приведенном в вопросе примере это будет: 

<table border='1'>
 <tr>
  <td>
   <table cellpadding="50">
    <tr>
     <td>cell1</td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td>cell2</td>
 </tr>
</table>
1 голос
/ 01 октября 2016

Вы можете попробовать этот 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;
}

используя класс 'splcell', мы можем стилизовать отдельную ячейку. 

.splcell{
       background:red;
       color:#fff;
       font-weight:bold;
       text-align:center;
    }
1 голос
/ 22 июля 2009

К сожалению, нет, если вы имеете в виду использование <table cellpadding="0">, так как это настройка всей таблицы. Если вы хотите, чтобы заполнение применялось только к одной ячейке, вам необходимо добавить класс и назначить ему значение padding.

...