3

次のHTMLテーブルがあります。各列に背景色を指定する必要があります (最初の列 = 赤、2 番目の列 = 黄色、3 番目の列 = 青)。CSSを使用してこれを行うにはどうすればよいですか?

注: これは IE6 以降で動作する必要があります。

http://jsfiddle.net/Lijo/kw4yU/

  <table id = "myTable">
    <thead>
        <tr>
            <th>
                 Name
            </th>
            <th>
                Address
            </th>
            <th>
                Age
            </th>
        </tr>
    </thead>
    <tr>
        <td>
            Lijo
        </td>
        <td>
            India
        </td>
        <td>
            27
        </td>
    </tr>
</table>

編集：

jsコードをdocument.ready内に配置することで機能しました。@Jose Rui Santos http://jsfiddle.net/Lijo/kw4yU/11/に感謝

別の解決策はhttp://jsfiddle.net/Lijo/kw4yU/12/です

さらに別のアプローチ:列幅の設定 - HTML テーブル

4

9 に答える 9

9

+セレクターを使う

​#myTable tr td {            /* makes all columns red */
    background-color: red;
}
#myTable tr td + td {       /* makes 2nd and 3rd columns yellow */
    background-color: yellow;
}
#myTable tr td + td + td {  /* makes 3rd column blue */
    background-color: blue;
}

<a href="http://jsfiddle.net/kw4yU/1/">デモはこちら

編集

上記の CSS は、データ セルの背景色のみを変更します。テーブルヘッダーも含めたい場合は、次のようにします。

#myTable tr th,
#myTable tr td {
    background-color: red;
}

#myTable tr th + th,
#myTable tr td + td {
    background-color: yellow;
}

#myTable tr th + th + th,
#myTable tr td + td + td {
    background-color: blue;
}

EDIT2

1つのjavascriptソリューションは、jQueryを使用することです

$("#myTable th, #myTable td").each(function (i) {
    $(this).css('background-color', ['red', 'yellow', 'blue'][i % 3]);
});

</p>

于 2012-05-24T11:48:24.540 に答える
5

あなたがすることができます：

td:nth-child(1){
    background-color: #f00;
}
td:nth-child(2){
    background-color: #ff0;
}
td:nth-child(3){
    background-color: #00f;
}

ただし、これは CSS3 を使用しているため、古いブラウザーをサポートする場合は JavaScript を使用する必要があります。

于 2012-05-24T11:48:21.417 に答える
3

タグcolの直後に追加できますtable

<table id = "myTable">
<col style="background-color: red;" />
<col style="background-color: yellow;" />
<col style="background-color: blue;" />
<thead>
    <tr>
        <th>
             Name
        </th>
        <th>
            Address
        </th>
        <th>
            Age
        </th>
    </tr>
    </thead>
    <tr>
        <td>
            Lijo
        </td>
        <td>
            India
        </td>
        <td>
            27
        </td>
    </tr>
</table>
于 2012-05-24T11:52:20.173 に答える
3

COLタグを使用します。

<style>
table {
    background-color: black;
}
.first {
    background-color: orange;
}
.second {
    background-color: green;
}
.third {
    background-color: pink;
}
</style>

  <table id = "myTable">
  <col class="first" /><col class="second" /><col class="third" />
    <thead>
        <tr>
            <th>
                 Name
            </th>
            <th>
                Address
            </th>
    <th>
                Age
            </th>
        </tr>
    </thead>
    <tr>
        <td>
            Lijo
        </td>
        <td>
            India
        </td>
    <td>
            27
        </td>
    </tr>
</table>
于 2012-05-24T11:53:19.787 に答える
1 
th,td{background:yellow}
th:first-child,td:first-child{background:red}
th:last-child,td:last-child{background:blue}​

このようにhttp://jsfiddle.net/thebabydino/kw4yU/3/

古いIEバージョンの場合は、代わりに兄弟セレクターの使用を検討してください。

th,td{background:red}
th+th,td+td{background:yellow}
th+th+th,td+td+td{background:blue}​

...または、HTMLの各列にクラスを追加してから、列クラスのスタイルを変更します。

于 2012-05-24T11:49:35.393 に答える
1

そのためにcolgroupタグを使用できます

<table id="myTable">
  <colgroup span="2" style="background-color:#FF0000;"></colgroup>
  <colgroup style="background-color:#0000FF;"></colgroup>
  <thead>
        <tr>
            <th>
                 Name
            </th>
            <th>
                Address
            </th>
    <th>
                Age
            </th>
        </tr>
    </thead>
    <tr>
        <td>
            Lijo
        </td>
        <td>
            India
        </td>
    <td>
            27
        </td>
    </tr>

</table>

インラインCSSが必要ない場合は、colgroupsにIDまたはクラスを指定して、スタイルシートで参照できます。

于 2012-05-24T11:49:47.230 に答える
0

HTMLコードを変更したくない場合は、次の方法で試すことができます。

table tr td {
    background-color: orange;            
}

​table tr td+td {
    background-color: yellow;            
}

table tr td+td+td {
    background-color: green;            
}
于 2012-05-24T11:54:06.963 に答える
0

テーブルは列ごとに作成されるのではなく、行ごとに作成されます。したがって、列ベースのスタイル設定を行うには、各セル要素に個別の共通スタイルを適用する必要があります。

フィドル

スタイル

.col1 { background-color: #ffddbb; }
.col2 { background-color: #ddffbb; }
.col3 { background-color: #bbddff; }

HTML

<table id = "myTable">
    <thead>
        <tr>
            <th class="col1">
                 Name
            </th>
            <th class="col2">
                Address
            </th>
    <th class="col3">
                Age
            </th>
        </tr>
    </thead>
    <tr>
        <td class="col1">
            Lijo
        </td>
        <td class="col2">
            India
        </td>
    <td class="col3">
            27
        </td>
    </tr>
</table>
于 2012-05-24T11:49:21.147 に答える
0

td にクラスを追加します。

HTML: <td class="first">data</td>

CSS:

td.first {
    background-color: #00FF00;
}
于 2012-05-24T11:48:20.070 に答える