web-dev-qa-db-ja.com

CSSの水平方向のテーブルセルの間隔：どうやって？

うまくいけば、これは簡単なものですが、解決策は見つかりませんでした。テーブルの列の間にスペースを入れたいのですが。

例

| Cell |<- space ->| Cell |<- space ->| Cell |

重要な点は、端にスペースを入れたくないということです。 border-spacingプロパティはありますが、IE（6または7）ではサポートされていないため、問題があります。また、端にスペースが置かれます。

私が思いついた最高の方法は、padded-right：10pxをテーブルセルに配置し、最後のクラスにクラスを追加してパディングを削除することです。余分なスペースはセルの外側ではなくセルの一部であるため、これは理想的とは言えません。透明なボーダーでも同じことができると思いますか？

私もjQueryを使ってみました：

$(function() {
  $("table > tbody > tr:not(:last-child").addClass("right-padding");
});

ただし、サイズが100行以下のテーブルであっても、場合によっては200〜400ミリ秒かかり、速度が遅すぎます。

助けてくれてありがとう。

ありがとう

列を提案している人には機能しません。これを試して：

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    table { border: 1px solid black; }
    td { background: yellow; }
  </style>
</head>
<body>
<table>
<col style="padding-right: 30px;">
<col style="padding-right: 30px;">
<col>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <td>7</td>
  <td>8</td>
  <td>9</td>
</tr>
</table>
</body>
</html>
javascriptjqueryhtmlcsslayout
38
Jordie

各テーブルcellに透明な境界線を付けるのはどうですか？これでうまくいくと思います...

table td {
  border:solid 5x transparent;
}

そして、あなたはそれを適用することができます水平にのように...

table td {
  border-left:solid 10px transparent;
}
table td:first-child {
  border-left:0;
}

これは、あなたが達成しようとしていることの完全な動作デモです...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      table {
        border: 1px solid black;
      }

      table td {
        background: yellow;
        border-left:solid 10px transparent;
      }

     table td:first-child {
       border-left:0;
     }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </table>
  </body>
</html>

IE6がCSS：first-childをサポートしているとは思いません。そのための回避策を次に示します...

<!–-[if IE 6]>
<style type="text/css">
  table td {
    border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent');
  }
</style>
<![endif]-->
20
Josh Stodola

それはあなたが探しているものかもしれません：

2つの値を使用できます。1つ目は水平方向のセルスペース、2つ目は垂直方向のセルスペースです。

<table style="border-spacing: 40px 10px;">
11
Lukas

colsを使用してみてください

例

<table>
    <col style="padding-right:20px;" />
    <col style="padding-right:30px;" />
    <col />
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

colsはクラスもサポートします:)

お役に立てれば

ダーコ

編集：明確にするためにcolは、列全体に影響を与えるためにテーブルの上部で宣言された要素です。最初のcol要素は最初の列に影響を与え、2番目のcol = 2番目の列というようになります。同じスタイルを複数の列に割り当てる場合は、それらをcolgroupsにグループ化できます。

EDIT2：さらに調査した結果、col要素に設定できる信頼できるスタイルは次のとおりであることがわかりました。

  • 境界
  • バックグラウンド
  • 幅
  • 可視性

マージンやパディングはありません。バガー！列の幅を設定すると、問題が明示的に解決されますか？

8
Darko Z

私のようにすでに細胞の周りに境界線がある場合、ジョシュの答えは機能しません。

「position：relative; left：-10px」を使用して、テーブル全体を少し左にシフトすることで問題を解決しました。これをテーブルのセルスペースと組み合わせました。

<div id='sandbox'>
    <table cellspacing='10'>
          <tr>
                <td class='smoothBox'>
                    ...
                </td>
                <td class='smoothBox'>
                    ...
                </td>
          </tr>
    </table>
</div>

そしてCSS：

#sandbox {
    float: left;
    position: relative; /* move the whole sandbox */
    left: -11px;        /* slightly to the left */
    width: 950px;
    margin-top: 0px;
    padding: 1px;
    text-align: left;
}
#sandbox table {
    float: left;
    width: 100%;
}
#sandbox td {
    width: 300px;
    vertical-align: top;
}

これが私にとって有効な方法です。それがあなたにも役立つことを願っています。

2
Timo

余白を付けて左にフロートした一連の固定幅divの使用を検討することもできます。これにより、要素のスタイル設定をもう少し制御できるようになります。

.row div {
     margin-right: 10px;
     float: left;
     width: 50px;
}

    <div class="row">
        <div>Cell One</div>
        <div>Cell Two</div>
        <div>Cell Three</div>
    </div>
2
Bayard Randel

Col groupingを使用してみましたか？

<table>
    <colgroup>
        <col class="right-padding" />
        <col class="right-padding" />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
    </tbody>
</table>
1
Joel

私の仕事です

border-collapse: separate; border-spacing: 0px 3px;

1
Shaho Amini

スペーサーとして機能する空のセルを追加するだけではどうですか？上記のようにcolタグを使用して、空のセルに特定の幅を与えることができます

<col/>
<col style="width:20px"/>
<col/>
<col style="width:20px"/>
<col/>
<tr>
  <td>Data</td>
  <td>& nbsp;</td>
  <td>Data</td>
  <td>& nbsp;</td>
  <td>Data</td>
</tr>

または、それらをさらに使いたい場合は、インラインスタイリングを使用する代わりに、クラスを追加します...

0
peirix