0

私はこれにかなり慣れていないので、それに答える投稿を検索しようとしましたが、見つけたすべての提案はまったく効果がないようです.

基本的に、私は HTML でテーブルを持っています - 2 行、最初の行には 1 つのセル (見出し) があり、2 番目の行には 3 つのセルがあります。行 2 の 3 つのセルを区切る細い境界線が必要です

見出し

1 | 2 | 3

そのように。私は基本的にそれを手に入れましたが、2は左側のラインに対して平らであり、そこにいくらかのスペースが必要です.

私はもう試した：

cellspacing:10px (td タグ内)
border-right-padding:10px border
-spacing:10px

私が欲しいものはないようです...

セルの幅を手動でサイズ変更しました。上部は 600px、下の 3 つはそれぞれ 200px です。

何か案は？

4

2 に答える 2

1

セレクターを使用して、テキストの配置を選択し、td 境界線を描画できます。 http://jsfiddle.net/A85rn/

tr td {text-align:center;border-left:solid;border-right:solid;width:2em;}
tr td:first-of-type {text-align:left;border:none}
tr td:last-of-type {text-align:right;border:none;}
于 2013-06-30T10:04:36.993 に答える
0

私は次のようなマークアップを想定しています

<table class=foo>
    <tr><th colspan=3>Heading
    <tr><td>1<td>2<td>3
</table>

td境界線を設定するには、最初の 2 つの要素に右境界線を設定できます。境界線とセルの内容の間の間隔を設定するには、td要素に水平方向の余白を設定します。左右両方のパディングを (対称的に) 設定するのが自然に思えますが、これは必要に応じて調整できます。スタイルシートの例:

.foo td { 
    padding: 0 0.3em;
    border-right: solid 1px;
}
.foo td:last-child {
    border-right: none;
}

jsfiddle

于 2013-06-30T10:49:34.950 に答える