一部のブラウザでテーブルの境界線がありません。（border-collapse）
ハリー
次のテーブル構造では、一部のブラウザでテーブルの境界線が表示されていますが、一部のブラウザでは表示されていません。
.test-table, table.test-table th, table.test-table td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px !important;
}
.test-td{
border-bottom:0px !important;
}<table class="test-table">
<tbody>
<tr>
<td colspan="2">Heading 1</td>
<td rowspan="2">Heading 2</td>
</tr>
<tr>
<td>Test </td>
<td>Test </td>
</tr>
<tr>
<td colspan="2">Test</td>
<td rowspan="2" class="test-td">Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2">Test</td>
</tr>
<tr>
<td colspan="2" class="common-heading">Test</td>
</tr>
<tr></tr>
</tbody>
</table>以下のブラウザのテーブルのスクリーンショットを参照してください。
Firefoxテーブル
クロームテーブル
Firefoxのテーブル構造は正しい構造ですが、Chromeでは正しく表示されません。このコードの何が問題になっていますか？すべてのブラウザでテーブル構造を同じにする方法は？
オスマンの子宮
rowspan=4以下のようにそのセルに設定します
.test-table, table.test-table th, table.test-table td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px !important;
}
.test-td{
}
<table class="test-table">
<tbody><tr>
<td colspan="2">Heading 1</td>
<td rowspan="2">Heading 2</td>
</tr>
<tr>
<td>Test </td>
<td>Test </td>
</tr>
<tr>
<td colspan="2">Test</td>
<td rowspan="4" class="test-td">Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2">Test</td>
</tr>
<tr>
<td colspan="2" class="common-heading">Test</td>
</tr>
<tr></tr>
</tbody></table>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
border-collapseでテーブルの幅を変更します：collapse
- 2
border-collapseプロパティが原因でテーブルの境界半径が機能しない
- 3
CSS3のborder-radiusプロパティとborder-collapse：collapseは混在しません。border-radiusを使用して、角が丸い折りたたまれたテーブルを作成するにはどうすればよいですか？
- 4
Angular付きのブートストラップ「エラー：$（...）。collapse（）は関数ではありません」
- 5
複数のhtmlテーブルを結合するときに二重境界線を防ぐ-border-collapseが機能しない
- 6
「border-collapse：collapse」はテーブルからパディングを削除します
- 7
テーブルの境界線がありません
- 8
Windows 10では、一部のFormBorderStylesに境界線がありません
- 9
ウェブサイトは一部のブラウザで動作しますが、すべてではありません
- 10
要素の「collapse」属性が機能していませんか？
- 11
PDFビュー（XSLT）にCALSテーブルの境界線がありません
- 12
`border-collapse：collapse`を使用すると、隣接するセルが描画されていないときに上部の境界線が表示されるのはなぜですか
- 13
openmpのcollapse句を理解する
- 14
Twitter Bootstrap Collapse ..奇妙な配列の初期化？
- 15
KableExtra-collapse_rowsアライメント
- 16
Angular CLI：__ WEBPACK_IMPORTED_MODULE_1_jquery __（...）。collapseは関数ではありません
- 17
テーブル「subscriber_historization」のUNIQUE制約に、パーティションキーの一部である列「processing_date」がありません。
- 18
dash_bootstrap_components.Collapseは折りたたまれません
- 19
AJax削除は一部のブラウザでは機能しません
- 20
divの境界線がChromeのテーブルヘッダーの境界線と一致しません
- 21
行スパンのあるテーブルには境界線がありません
- 22
iframeは、一部のブラウザではWebページを正しくロードしますが、他のブラウザではロードしません（安全でないコンテンツエラー）
- 23
Bootstrap3.0のCollapseブレークポイントを変更します
- 24
Ubuntu 18.04サーバーの一部のユーザーアプリ（ClamAV、CSF）のPIDファイルが「/ var / run」にありませんが、サービスはアクティブです。どうすればよいですか？
- 25
一部の人にはDataTable警告テーブルajaxエラーがありますが、すべてが光沢があるわけではありません
- 26
Border-SpacingとBorder-Collapseが機能しない
- 27
Border-SpacingとBorder-Collapseが機能しない
- 28
CSSはborder-spacingとborder-collapseをtheadに追加します
- 29
オブジェクトはこのレルムのスキーマの一部ではありません
コメントを追加