「」とCSSのみを使用してテーブルを作成できますか?

のみを使用してテーブルを作成する方法タグと CSS

HTML の

のみを使用要素と CSS を使用すると、ブラウザ間で互換性のある機能的なテーブルを作成できます。

提供された HTML スニペットでは、さまざまなクラスを使用して要素のスタイルを設定します。クロスブラウザーのエクスペリエンスを実現するには、次のように CSS を調整できます:

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

調整された CSS:

• では、.divTable を .div-table に置き換えました。一貫性。
• ブラウザ間の互換性を確保するために、border-collapse: Separate; を削除しました。 from .divTable.

この更新された CSS により、IE7 以前を含むすべての主要なブラウザーでテーブルが正しく表示されることが保証されます。

以上が「」とCSSのみを使用してテーブルを作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：Web ブラウザはどのように Web ページをロードして実行するのでしょうか? 次の記事：CSSのみを使用してHTMLリストの箇条書きの色を変更する方法?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

3

2460

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

11

2602

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

2195

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

2069

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

2168

関連トピック

詳細>

• Eth通貨価格の今日の市場価格USD
• setInterval
• テキストボックスの枠線を消す方法
• Javaで入力された数値を取得する方法
• URLファイルの開き方
• コンピュータアプリケーションにおける未知のソフトウェア例外の解決策
• Huaweiデュアルシステム間で設定を切り替える方法
• 仮想通貨の取引方法