10

私はテーブルを持っています

<tr>
   <td>One</td>
   <td>Two</td>
   <td>Three</td>
   <td>Four</td>
</tr>

s'Two 'と' Three 'だけ<td>の間にスペースを追加するにはどうすればよいですか？

4

7 に答える 7

21

最も簡単な方法：

td:nth-child(2) {
    padding-right: 20px;
}​

ただし、テーブルの背景色や画像を操作する必要がある場合は、機能しません。その場合、これはもう少し高度なソリューション（CSS3）です。

td:nth-child(2) {
    border-right: 10px solid transparent;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

セルの右側に透明な境界線を配置し、背景色/画像を境界線から引き離して、セル間の間隔の錯覚を作成します。

注：これが機能するには、親テーブルにが必要border-collapse: separateです。作業する必要がある場合はborder-collapse: collapse、同じ結果を得るには、同じ境界線スタイルを次のテーブルセルに適用する必要がありますが、左側にあります。

于 2012-11-10T06:59:36.510 に答える
11

簡単な答え：これらの2つのtdsにスタイルフィールドを与えます。

<tr>
<td>One</td>
<td style="padding-right: 10px">Two</td>
<td>Three</td>
<td>Four</td>
</tr>

きちんとしたもの：クラス名を使用する

<tr>
<td>One</td>
<td class="more-padding-on-right">Two</td>
<td>Three</td>
<td>Four</td>
</tr>

.more-padding-on-right {
  padding-right: 10px;
}

複雑なもの：CSSでn番目の子セレクターを使用し、これら2つに特別なパディング値を指定します。これは、最新のブラウザーで機能します。

tr td:nth-child(2) {
  padding-right: 10px;
}​
于 2012-11-10T07:01:43.517 に答える
6

セルパディングとセルスペーシングを設定する必要があります。

<table cellpadding="5" cellspacing="5">
<tr> 
<td>One</td> 
<td>Two</td> 
<td>Three</td> 
<td>Four</td> 
</tr>
</table>
于 2012-11-10T09:41:06.573 に答える
1

このデモをお試しください

HTML

<table>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
    </tr>
</table>

CSS

td:nth-of-type(2) {
   padding-right: 10px;
}
于 2012-11-10T07:01:16.103 に答える
1

私の選択は、2つのタグのtd間にを追加し、をに設定することでした。それはあなたの好みに多かれ少なかれすることができます。これは安っぽいかもしれませんが、シンプルで機能します。tdwidth25px

于 2017-08-07T12:30:05.753 に答える
1

答えはどれも私にはうまくいきませんでした。最も簡単な方法は、ページの背景色と<td>の間にsを追加することです。width = 5pxbackground='white'

<th>テーブルヘッダーを表すのリストがある場合も、これは失敗します。

于 2018-09-04T09:29:21.653 に答える
0

td：nth-​​of-type（n）{padding-right：10px;}

すべてのtd間の自動スペースを調整します

于 2020-02-27T06:15:06.460 に答える