make the whole parent td clickable for a radio button (without jQuery)

TL;DR: if you have a radio button (possibly with a caption) inside of a table cell, and you click in anywhere on the cell to change the button, put it (and maybe the caption) in a label but use CSS to make the label "display: block;"

Making a simple "what songs should we play" survey tool for my band, something like:

I had put a label around the caption and the radio button in the table, something like 

<td><label>Yah!<br /><input type='radio' name='songname' value='1'></label></td>

Using label like that is the simplest way to make both the button and the caption clickable, but I noticed the empty space to the left and right of the radio button wasn't clickable... bad UX!

I Googled around for a solution, but most of the answers were jQuery. Bleh!

Eventually I realized, making the label display:block; would effectively have it take up the whole width of the table cell, and resolve my issue.

It took me a bit to get there - I mean, I knew this was a pretty decent case for a table (it is pretty much tabular data, after all) but I decided to try fixing it with a css-grid - that way I could make the label the equivalent of the table cells, and so the whole cell would be clickable.

It worked ok, I guess, but definitely reinforced that css-grid isn't a good replacement for a <table>... not having the equivalent of <tr> is pretty unforgiving if you leave out an item! It seems very strange to be relying on modulus arithmetic to make sure your columns are consistent...

(Of course, some of this all goes back to the allergic reaction against using tables for layout that made life kind of stupid when we had CSS to style things but  flex-box wasn't widely available...)