[HTML]ヘッダー全体がボタンに

Question

ヘッダーのうちの一部分でなく、ヘッダー全体がボタンに
なる書き方を探っています。

↓現在のコード これではヘッダー内に送信ボタンがあるだけになってしまう

<th>ヘッダー名
<button value="送信">　いろいろ
</button>
</th>

Answer 1

th は table tr の中にないとNGだと思いますが。

<table>
  <tr>
    <th>ヘッダー名
      <button value="送信">　いろいろ
      </button>
    </th>
  <tr>
</table>

上記のようなHTMLでbuttonを画面幅一杯にしたいなら、

table {
  width: 100%;  
}
th button {
  width: 100%;  
}

あくまで、例です。
実際は、適切にクラスかIDを付加してセレクタを制限したほうがいいです。

Answer 2

thのpaddingを0にbottonのmarginを0に、
とか考えられる手はないわけではないですが、
th自体をボタンっぽくCSSで装飾してclickイベントを取得するやり方もありかなと思います。