29

最近、テーブルで cellspacing 属性を使用する必要があることがわかりましたが、水平方向にのみ機能させることができるかどうか疑問に思っていました。ページ全体のレイアウトを台無しにしてしまうので、縦に広げたくありません。

4

3 に答える 3

48

設定よりも良い方法はcellspacing="10"CSSを使用することです。次のCSSを使用して、テーブルのセル間隔をターゲットにできます。

table {
  border-spacing: 10px 0;
}

最初の値は水平方向の間隔を指定し、2番目の値は垂直方向の間隔を指定します。

于 2012-06-06T01:08:26.407 に答える
1

セルの内容を区別する必要がある場合は、セル内の間隔を使用します（cellspacing=0HTMLで設定します）。これは、CSS対応のブラウザで広くサポートされています。

セル自体を分離して、境界線または色付きの背景の間に間隔を空ける必要がある場合はborder-spacing、問題を解決しますが、ブラウザーをサポートする場合に限ります。

divコンテキストによっては、セルの内容を、セルの間隔のように見える必要なパディングを除いてセル領域をカバーするように設定して、セルの間隔をシミュレートすることを検討することもできます。div次に、これらの要素に任意の境界線または背景を設定します。

于 2012-06-06T06:27:22.680 に答える
1

ええ、コンテンツとスタイリングの分離が見苦しく、忌まわしいことは知っていますが、すべてのプラットフォームで一貫して機能するのは、スペーサー (不可視) 列を追加することだけです。

ここでは、空のテーブル データを最初の行に配置し、幅 (ピクセル単位) を指定しています。連続する行に対応する空のテーブル データを作成しました。それは本物の古い学校のように感じますが、シンプルで機能します。

<table>
    <tr>
        <td>some content for column 1</td>
        <td width="18" />
        <td>other content for 2nd visible column (actually column 3)</td>
        <td width="18" />
        <td>content for 3rd visible column (actually column 5)</td>
    </tr>

    <tr>
        <td><img src="image_for_column 1.png" /></td>
        <td />
        <td><img src="image_for_column 2.png" /></td>
        <td />
        <td><img src="image_for_column 3.png" /></td>
    </tr>

</table>
于 2018-07-16T22:57:11.507 に答える