[解決済み】テーブルの内側だけボーダーを適用するには?
2022-04-11 06:43:46
質問
テーブルの内側だけにボーダーを付ける方法を考えています。私が行うとき。
table {
border: 0;
}
table td, table th {
border: 1px solid black;
}
ボーダーはテーブル全体を囲み、テーブルセル間にもあります。私が実現したいのは、ボーダーをテーブルの内側のセルだけにすることです(テーブルの外側にボーダーをつけない)。
以下は、私がテーブルのために使用しているマークアップです(重要でないと思うのに)。
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Cell (1,1)</td>
<td>Cell (1,2)</td>
</tr>
<tr>
<td>Cell (2,1)</td>
<td>Cell (2,2)</td>
</tr>
<tr>
<td>Cell (3,1)</td>
<td>Cell (3,2)</td>
</tr>
</table>
そして、私がほとんどのテーブルに適用している基本的なスタイルがこちらです。
table {
border-collapse: collapse;
border-spacing: 0;
}
解決方法は?
もし、あなたがやろうとしていることが、私が考えるようなことであれば、もう少し、このようなものが必要でしょう。
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid black;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
}
問題は、すべてのセルの周囲に「フルボーダー」を設定しているため、テーブル全体にボーダーがあるように見えてしまうことです。
乾杯
EDIT: これらの擬似クラスに関するもう少し詳しい情報は、以下のサイトにあります。 quirksmode そして、予想通り、IEのサポートという点では、かなりS.O.L.になっています。
関連
-
[解決済み】Telegramマークダウンの構文。太字 *と* イタリック?(2018年9月)
-
[解決済み] 絶対位置が機能しない
-
[解決済み] WebForms UnobtrusiveValidationMode には、'jquery' の ScriptResourceMapping が必要です。jquery という名前の ScriptResourceMapping を追加してください(大文字と小文字を区別します)。
-
[解決済み] :last-child が期待通りに動作しない?
-
[解決済み] Angular 2+のテンプレートで値を表す三項演算子
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] ボーダーをdivの内側、端に配置しない
-
[解決済み] CSS3のborder-radiusプロパティとborder-collapse:collapseが混ざらないのですが。border-radiusを使用して、角を丸くした折りたたみテーブルを作成するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】HTML5検証エラー:body開始タグは見たが、同じタイプの要素がすでに開かれていた
-
[解決済み】このインラインブロックのdiv要素の間に説明のつかない隙間があるのはなぜですか?[重複]
-
[解決済み] html : iframeでhtmlのコンテンツが表示されない。
-
[解決済み] Bootstrapのカラムが機能しない
-
[解決済み] HTMLの#記号の文字実体は?
-
[解決済み] 高さを固定したBootstrapパネルボディの作り方
-
[解決済み] HTML5 Validation Error: body start tag が見えたが、同じタイプの要素がすでに開かれていた
-
[解決済み] ChromeのデベロッパーツールでHTML Bodyにcz-shortcut-listen="true "が表示される?
-
[解決済み] Add a scrollbar to a <textarea> [duplicate]
-
[解決済み] アトムでキーバインドリゾルバーのポップアップを消すにはどうしたらいいですか?