1つのhtmlテーブルセル内のセルパッディング

Question

htmlテーブル全体に対して1つのセルでセルパディングを行うことは可能ですか？

Answer 1

だけのスタイルCSSを使用してセル：あなたがメールが電子メールプログラム、特に見通し全体で一貫するようにしたい場合は、CSSでパディングを達成するために、時には困難である電子メールをスタイリングで使用するために

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

Answer 2

<table cellpadding="0">を使用している場合は残念ながらそうではありません。テーブル全体の設定です。 1つのセルにしかパディングを適用しない場合は、クラスを追加して、その値にpadding値を割り当てる必要があります。

Answer 3

。 cssを使用したくない場合は、パディングを適用するセルに1つの行と1つのセルを持つ新しいテーブル全体を配置してください。次に、その「1つのセル」テーブルにパディングを適用します。

これはなる質問に与えられた例では：

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

Answer 4

あなたはこの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; 
    }