【HTML】【CSS】table-rowの1行まるごとをcheckboxのlabelとして機能させ、tableのデザインもきれいに保持したい。

Question

前提・実現したいこと

table-row、table-cellでtableを組み、table-rowの1行まるごとをcheckboxのlabelとして機能させ、tableのデザインもきれいに保持したい。

発生している問題・エラーメッセージ

table-row、table-cellでtableの見た目は作成できているが、
table-rowの中にlabelを入れると、
table-rowの１行まるごとをcheckboxのlabelの機能は実行できているが、
tableデザインが崩れてしまう。

該当のソースコード

下記の通りのテーブルデザインだとtableの見た目は作成できています。

html
<div class="table">
  <div class="row">
     <div class="cell">項目1</div>
     <div class="cell">項目2</div>
     <div class="cell">項目3</div>
     <div class="cell">項目4</div>
  </div>

  <div class="row">
    <div class="cell">項目1</div>
    <div class="cell">項目2</div>
    <div class="cell">項目3</div>
    <div class="cell">項目4</div>
  </div>

  <div class="row">
    <div class="cell">項目1</div>
    <div class="cell">項目2</div>
    <div class="cell">項目3</div>
    <div class="cell">項目4</div>
  </div>

<input type="checkbox" id="test01">
<input type="checkbox" id="test02">
<input type="checkbox" id="test03">

</div>

css
.table {
	display: table;
	width: 100%;
}
.table label {
	display: block;
	width: 100%;
	height: 100%;
}
.table div.row {
	display: table-row;
	width: 100%;
}
.table div.cell {
	display: table-cell;
	background: #eca4a4;
	width: 25%;
}

以下のようにlabelを入れるとtableデザインが崩れてしまう。

html
<div class="table">
  <div class="row">
    <label for="test01">
     <div class="cell">項目1</div>
     <div class="cell">項目2</div>
     <div class="cell">項目3</div>
     <div class="cell">項目4</div>
    </label>
  </div>

  <div class="row">
   <label for="test02">
    <div class="cell">項目1</div>
    <div class="cell">項目2</div>
    <div class="cell">項目3</div>
    <div class="cell">項目4</div>
  </label>
  </div>

  <div class="row">
   <label for="test03">
    <div class="cell">項目1</div>
    <div class="cell">項目2</div>
    <div class="cell">項目3</div>
    <div class="cell">項目4</div>
   </label>
  </div>

<input type="checkbox" id="test01">
<input type="checkbox" id="test02">
<input type="checkbox" id="test03">

</div>

試したこと

labelにdisplay:blockを入れる、labelの位置を<div class="row">の外側に置くなどしてみたが、何も解決できなかった。

Answer 1

display: table-row; は要素を<tr>としなさいということです。
<tr>の子要素にできるのは、<td> または <th> 要素です。<lable>は子要素にできません。それが原因でtableレイアウトにはなりません。

<div class="row">は削除して、<lable> に display: table-row; を設定すればいいでしょう。

<div class="table">
  <label class="row" for="test01">
    <div class="cell">項目1</div>
    <div class="cell">項目2</div>
    <div class="cell">項目3</div>
    <div class="cell">項目4</div>
  </label>

  <label class="row" for="test02">
    <div class="cell">項目1</div>
    <div class="cell">項目2</div>
    <div class="cell">項目3</div>
    <div class="cell">項目4</div>
  </label>

  <label class="row" for="test03">
    <div class="cell">項目1</div>
    <div class="cell">項目2</div>
    <div class="cell">項目3</div>
    <div class="cell">項目4</div>
  </label>
</div>
<input type="checkbox" id="test01">
<input type="checkbox" id="test02">
<input type="checkbox" id="test03">

.table {
    display: table;
    width: 100%;
}

.table label.row {
    display: table-row;
    width: 100%;
}
.table div.cell {
    display: table-cell;
    background: #eca4a4;
    width: 25%;
}

Comments

[nightmare10good]

わかりやすい説明ありがとうございます。
trのなかにはtdかthしか入れられないというのは知っていたはずなのに、気づきませんでした。

Answer 2

labelをtable-rowにしましょう。

<div class="table">
  <label class="row" for="test01">
   <div class="cell">項目1</div>

.table label.row {
    display: table-row;

Comments

[nightmare10good]

ありがとうございます。
うまくいきました。