web-dev-qa-db-ja.com

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

HTMLテーブル全体ではなく1つのセルにセルのパディングを含めることは可能ですか？

htmlhtml-tablecell
18
leora

CSSを使用してセルのスタイルを設定するだけです。

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

メールのスタイル設定で使用する場合、メールプログラム、特にOutlook全体でメールの一貫性を保つために、CSSでパディングするのは難しい場合があります。 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>
16
C.A. Vuyk

あなたはこの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
Aswin KV

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

1
Bryan Veloso