検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >「」とCSSのみを使用してテーブルを作成できますか?

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

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-11 10:32:11525ブラウズ

Can I Create Tables Using Only `` and CSS?

<div> のみを使用してテーブルを作成するおよび CSS

問題ステートメント:

従来の HTML テーブル要素 (

) を使用してテーブルを作成するのは面倒な場合があります。 <div> のみを使用して同等のテーブル構造を実現できますか?および CSS?

サンプル テーブル:

次のサンプル テーブルが提供されています:

<div>

<div>

CSSスタイリング:

次の CSS コードは次のとおりです。提供:

.divTable
{

display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; /* cellspacing:poor IE support for this */

}

.divRow
{

display: table-row;
width: auto;

}

.divCell
{

float: left; /* fix for buggy browsers */
display: table-column;
width: 200px;
background-color: #ccc;

}

サポートIE7 以下の場合:

表示: table を使用しているため、提供されたコードは IE7 以下のバージョンと互換性がありません。

代替解決策:

互換性の問題に対処するには、次の 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 コードは、必要なテーブルのような構造を維持しながら、IE7 以下との互換性を提供します。

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

css html for while using this display table issue
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：複数の Div 要素を 1 行にインラインで表示するにはどうすればよいですか?次の記事：複数の Div 要素を 1 行にインラインで表示するにはどうすればよいですか?

関連記事

続きを見る