하나의 HTML 테이블 셀에서 셀 패딩

Question

전체 HTML 테이블에 비해 하나의 셀에 셀 패딩을 가질 수 있습니까?

Answer 1

CSS를 사용하여 셀을 스타일링하십시오.

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

Answer 2

이메일 스타일링에 사용하려면 이메일 프로그램, 특히 Outlook에서 메일이 일관성을 유지하려면 CSS로 패딩하기가 어렵습니다. CSS를 사용하지 않으려면, 해결 방법은 패딩을 적용하려는 셀에 하나의 행과 하나의 셀이있는 완전히 새 테이블을 넣는 것입니다. 그런 다음 패딩을 해당 '하나의 세포'테이블에 바릅니다.

질문에 주어진 예에서 이것은 다음과 같습니다.

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

Answer 3

불행히도, 당신이 사용한다고 언급하는 경우 <table cellpadding="0">, 그것은 테이블 전체 설정입니다. 패딩을 하나의 셀에만 적용하려면 클래스를 추가하고 할당해야합니다. padding 그런 식으로 가치.

Answer 4

이 CS를 시도해 볼 수 있습니다.

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