HTML5 Broken - checkbox in table using unequal columns

I have tried everything, and nothing works, with all advice on the web being wrong about this. I have multiple table columns of data, and in the first three on the left, I need checkboxes (input). The columns are necessarily unequal. I can ONLY use in-line width on the td, because the col attribute no longer works to set width, neither does CSS. The cols display the correct widths when I use table-layout:fixed in the CSS for the table. The problem is that it is impossible to get the input check boxes inside the columns, because their apparent width is NOT changed, resulting in the checkboxes being placed under the wrong column header and sometimes under the text of a neighboring column. Of course everything works fine if you let the browser do it its way (auto something), but that is unacceptable for the data. What do I do about this? I'm ready to complain to someone, but how in the world can you do that?

We can't diagnose or offer suggestions without seeing code. Please provide a reduced test page, using just the pertinent markup and CSS to demonstrate the problem, and we can take a look.

Setting up a live demo in JSBin, JSFiddle or CodePen would be most useful to us.