web-dev-qa-db-ja.com

HTMLのテーブル列間の距離を増やす方法は？

各列の間に50ピクセル、上と下に10ピクセルのパディングがある単一行のテーブルを作成したいとしましょう。

HTML/CSSでこれを行うにはどうすればよいですか？

htmlcsshtml-tablepadding
44
idude

偽の<td>sは必要ありません。代わりにborder-spacingを使用してください。次のように適用します。

HTML：

<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
</table>

CSS：

table {
  border-collapse: separate;
  border-spacing: 50px 0;
}

td {
  padding: 10px 0;
}

ご覧ください動作中.

79
daniels

<td>sの幅を50pxに設定し、<td> +別の偽の<td>を追加します

フィドル

HTML：

<table>
    <tr>
        <td>First Column</td>
        <td></td>
        <td>Second Column</td>
        <td></td>
        <td>Third Column</td>
    </tr>
</table>

CSS

table tr td:empty {
    width: 50px;
}

table tr td {
    padding-top: 10px;
    padding-bottom: 10px;
}

コードの説明：

最初のCSSルールは空のtdをチェックし、それらに50pxの幅を与えます。次に、2番目のルールはすべてのtdに上下のパディングを与えます。

12
Mohammad Areeb Siddiqui

私が正しく理解していれば、これが必要です fiddle 。

HTML：

<table>
<tr>
    <td>Hello HTML!</td>
    <td>Hello CSS!</td>
    <td>Hello JS!</td>
</tr>

CSS：

table {
    background: gray;
}
td {    
    display: block;
    float: left;
    padding: 10px 0;
    margin-right:50px;
    background: white;
}
td:last-child {
    margin-right: 0;
}
9
Igor

パディングのみを使用できます。そのようです：

http://jsfiddle.net/davidja/KG8Kv/

HTML

   <table>
        <tr>
            <td>item1</td>
            <td>item2</td>
            <td>item2</td>
        </tr>
    </table>

CSS

 td {padding:10px 25px 10px 25px;}

OR

 tr td:first-child {padding-left:0px;}
 td {padding:10px 0px 10px 50px;}
7
David Allen

選択した回答よりも優れたソリューションは、ボーダー間隔ではなくボーダーサイズを使用することです。ボーダー間隔を使用する場合の主な問題は、最初の列でさえ前面に間隔があることです。

例えば、

table {
  border-collapse: separate;
  border-spacing: 80px 0;
}

td {
  padding: 10px 0;
}
<table>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

これを回避するには、border-left: 100px solid #FFF;を使用し、最初の列にborder:0pxを設定します。

例えば、

td,th{
  border-left: 100px solid #FFF;
}

 tr>td:first-child {
   border:0px;
 }
<table id="t">
  <tr>
    <td>Column1</td>
    <td>Column2</td>
    <td>Column3</td>
  </tr>
  <tr>
    <td>1000</td>
    <td>2000</td>
    <td>3000</td>
  </tr>
</table>
5
Ani Menon

試してみる

padding : 10px 10px 10px 10px;
4
Chetan Gawai