tbodyとtfootに分かれているtableを、偶数行と奇数行で、色違いにしたい。

tbodyとtfootに分かれているtableの偶数行と奇数行で、色違い指定を指定したいです。
今は、tbodyの偶数行と奇数行、tfootの偶数行と奇数行でそれぞれ色が適用されるため、5行目6行目が同じ色になってしまいます。

tbodyとtfootのグループ単位ではなく、table単位で色違いにする方法は無いでしょうか？

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-language" content="ja">
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>abc</title>
</head>

<style type="text/css">	
/*tableの偶数行と奇数行で色違い指定*/
table.list tr:nth-child(even) {
    background: #eee;
}

table.list tr:nth-child(odd) {
    background: #fff;
}
</style>

<body>
<table class="list" style="width: 300px;">
<thead>
    <tr>
        <th>列A</th>
        <th>列B</th>
        <th>列C</th>
    </tr>
</thead>
<tbody >
    <tr >
      <td>1</td>
      <td>あ</td>
      <td>tbody</td>
    </tr>
    <tr >
      <td>2</td>
      <td>い</td>
      <td>tbody</td>
    </tr>
    <tr >
      <td>3</td>
      <td>う</td>
      <td>tbody</td>
    </tr>
    <tr >
      <td>4</td>
      <td>え</td>
      <td>tbody</td>
    </tr>
    <tr >
      <td>5</td>
      <td>お</td>
      <td>tbody</td>
    </tr>
</tbody>
<tfoot >
    <tr >
      <td>6</td>
      <td>か</td>
      <td>tfoot</td>
    </tr>
    <tr >
      <td>7</td>
      <td>き</td>
      <td>tfoot</td>
    </tr>
    <tr >
      <td>8</td>
      <td>く</td>
      <td>tfoot</td>
    </tr>
</tfoot>
</table>
</body></html>

行動規範の内容に同意します

回答3件

CSSの疑似クラスだけで親を飛び越えて計上した要素数に応じて指定をするのは難しいと思います。
counterで要素数を数えることは出来てもそれをnth-childに引き継がせることができませんので。

cssで個別にクラスをつけて対処するか、jsで対応するのが無難かと思われます。

投稿2019/10/24 09:53

編集2019/10/24 09:53

nt4c

総合スコア768

ベストアンサー

考えたのですが CSS のみでは変なものしか思いつかなかったのでスクリプトで書いてみてはどうでしょうか？
それほど難しくはないです。

JavaScript
1document.addEventListener('DOMContentLoaded', function(event) {
2  const classList = ['odd', 'even'];
3  document.querySelectorAll('table.list tr').forEach(function(tr, index) {
4    tr.classList.add(classList[tr.rowIndex % 2]);
5  });
6}, { once: true });

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

投稿2019/10/25 08:18

x_x

総合スコア13749

退会済みユーザー

2019/10/25 08:52

ありがとうございました。これに近いかたちで自己解決しました。 tbodyの行数が奇数か偶数かで、tfootに適用するcssを変えるようにしました。 cssのみでは解決せず、結局jqueryに頼ることになりました。

行動規範の内容に同意します

HTML Standard

HTML StandardではHTMLマークアップ上の次の属性値がグローバル変数名となる仕様が追加されました。

全要素のid属性値
embed,form,frameset,img,object要素のname属性値

7.3.3 Windowオブジェクトの名前付きアクセス - HTML Standard 日本語訳

7.3.3 Windowオブジェクトの名前付きアクセス

window[name]
指示された要素または要素のコレクションを返す。
一般的な規則として、これに依存することはもろいコードを導く。たとえば、新しい機能がウェブプラットフォームに加えられるように、いずれかのIDがこのAPIのマッピングで終わることは時間をかけて変化できる。この代わりに、document.getElementById() または document.querySelector() を使用する。

...中略...

Named objects of Window object window with the name name, for the purposes of the above algorithm, consist of the following:

document-tree child browsing contexts of window's associated Document whose name is name;

embed, form, frameset, img, or object elements that have a name content attribute whose value is name and are in a document tree with window's associated Document as their root; and

HTML elements that have an id content attribute whose value is name and are in a document tree with window's associated Document as their root.

デメリット

旧来からある「標準外の独自拡張」を標準仕様に取り込んだものですが、グローバル変数の名前衝突の弊害は大きく、getElementById より優先しようとは、私は思いません。
運用するには、HTMLとJavaScriptの両方をチェックして、グローバル変数が衝突しないように管理する必要があります。

Re: ttomo さん

投稿2019/10/24 15:47

編集2019/10/24 15:49