CSSでtdタグ内の値が上段のtdタグ内の値と同一の場合に値を非表示にしたい

有識者の皆様よろしくお願いいたします。

帳票作成業務の中でセルの値が上段のセルと同値の場合に
セルの上罫線と値を非表示にする必要が出てきました。

Jsでガリガリif文を記述することも考えましたが
あえてCSSで出来ないかと思っています。

●下記の例で言うとid属性が「td3」「td4」のタグ内の値（テスト2）を
非表示にして、セルの上罫線を非表示にしたいのです。

HTML
1<table>
2	<tr>
3		<td id="td1">テスト1</td>
4	</tr>
5	<tr>
6		<td id="td2">テスト2</td>
7	</tr>
8	<tr>
9		<td id="td3">テスト2</td>
10	</tr>
11	<tr>
12		<td id="td4">テスト2</td>
13	</tr>
14</table>

アドバイスよろしくお願いいたします。

kei344

2018/04/25 14:57

HTMLは編集可能なのでしょうか？

kszk311

2018/04/25 15:09

現状のCSSの方も記載して下さい。

koshiDra

2018/04/25 15:19

kei344さん：編集可能です。　kszk311さん：設計段階なので現時点でソースはありません。

kszk311

2018/04/25 15:43 編集

＞Jsでガリガリif文を記述することも考えましたがここのソースをできれば記載していただけると良いのですが…。JSは部分的に使っても良い感じですか？というか使わないとできないと思いますが。

m.ts10806

2018/04/26 01:03 編集

あえてCSSでやらないければいけない理由は何でしょうか。CSS自身はHTMLにどのような要素があるかは知らないものなので、無理と思いますが。

koshiDra

2018/04/26 14:01

mts10806さん：単純にCSSのみで出来ないだろうかという興味です。ですが無理そうなのでJsで実装を行います。

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

回答5件

td2とtd3の値が同じかどうかの判定自体がcssでは出来ないと思うので難しいのではないでしょうか？

投稿2018/04/25 15:40

tagu5959

総合スコア41

koshiDra

2018/04/26 13:52

回答ありがとうございます。 Jsでの実装で進めたいと思います。

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

その帳票のHTMLはどうやって出力するのでしょうか。
静的HTMLではないですよね？

たとえば ASP.NET でテーブルタグを出力するのであれば、
ASP.NET 側で if 文を書いて
「前行と同じ値でなければ class="td-valgrp-first" を付与する」
「前行と同じ値だったら class="td-valgrp" を付与する」
のようにしても良いかなと思います。

CSSでは
.td-valgrp-first は下枠線なし
.td-valgrp は上枠線＆下枠線なし
を定義。とかですかね

完全に CSS のみだとちょっと難しいのではないかなと思います。
js でやるか、サーバーサイドでやるかじゃないでしょうか。

投稿2018/04/26 01:56

編集2018/04/26 02:00

sk_3122

総合スコア1126

koshiDra

2018/04/26 13:58

回答ありがとうございます。今回はクライアントサイドで処理する必要がありましたのでそれならばCSSのみで出来ないかを考えていました。 Jsで実装したいと思います。

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

言うほどコード量が多いわけでもないので、作ってみてはどうでしょうか？

CSS
1table {
2  border-collapse: separate;
3}
4
5td {
6  border: 1px solid #000;
7}
8
9td.same {
10  border-top-color: transparent;
11  color: transparent;
12}

JavaScript
1document.querySelectorAll('tr:not(:first-child) td').forEach(c => {
2  let tr = c.parentElement;
3  if (c.innerHTML === tr.parentElement.rows[tr.rowIndex - 1].cells[c.cellIndex].innerHTML) {
4    c.classList.add('same');
5  }
6});

投稿2018/04/26 02:04

x_x

総合スコア13749

koshiDra

2018/04/26 13:59

回答ありがとうございます。 CSSのみで出来ないかを考えていましたが無理そうなので JSで実装をしたいと思います。

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

ベストアンサー

とりあえずやりたいことの確認なんですがこういうことですかね。
構成とか見直した方がいいかもしれません。
https://codepen.io/sleepzzz/pen/qYNKEw

css
1table {
2  border-collapse: collapse;
3  border-bottom: 2px solid #000;
4}
5td {
6  border: 2px solid #000;
7  border-bottom: none;
8}
9td.same-up-item {
10  border-top: none;
11  text-indent: -9999px;
12}

js
1$(function(){
2  var prevHTML = '';
3  $('td').each(function(){
4    if(prevHTML == $(this).html()){
5      $(this).addClass('same-up-item')
6    }
7    prevHTML = $(this).html();
8  })
9})