【css】テーブルのtdにプロパティを追加するときに気を付ける事

2021-07-01 CSS

例えば、テーブルのtdタグで囲んだボタンが一つあるとします。

<td className="buttons">
  <Button onClick={() => click()}></Button>
</td>

このボタンにwidthをつけて横幅を設定をしようと以下のようにプロパティを追加

したのですが、これでは反映されませんでした。

#sample-page table td buttons {
  width: 38px;
}

tdタグの中にあるボタンのプロパティを変えたい場合はtdを含めず、tableを指定して

その直ぐ直下に.buttonsをつければ簡単に変えることができます。

#sample-page table .buttons {
  width: 38px;
}

tdを含める必要があるのは、td ons-inputやtd ons-buttonなどといったそのタグ全般を指すセレクタです。

なので一部品である.buttonにtdを追加しても見向きもされないということです。