When aligning a series of a checkboxes in a VFP form, it's a no-brainer, but doing so on a web form (with the goal of it looking as much as the paper form as possible) looks quite tricky.

On a paper form, the checkboxes are aligned on the right edge of the form, and the text (which would be a label in on-screen case) is anywhere to the left, most often left-aligned.

I have the whole form set as a HTML table, with text in one column, user-editable controls in another and an extra column or two with editbox for remarks, additional instructions etc. The checkboxes come into play in a multiple choice case, where user is expected to check one or more - pretty much like a multiselect listbox, except you don't have to keep ctrl pressed.

Now whatever I do I get into trouble, i.e. it doesn't look right. The form is displayed in a browser object, but I'm also checking it in Mozilla, and it looks the same there.

I tried setting the series of checkboxes and their labels in a table - left column the labels, right column the checkboxes. No matter what I do, after the page loads, the width of the checkbox's column is about 70%. I tried setting the width of the column to 5%, 10%, 2em - to no avail. The size of the marquee around the checkbox always seems to be the same as the width of textboxes in other rows.

I tried to wrap it in a span tag with fixed width, and the label in another span tag, without any table, just a series of label-checkbox-br, label-checkbox-br, with the tag for the checkbox having a width designation (2em or so), still the width of the checkbox equals the width of the textboxes.

Is there any neat trick to tame this width? I may need to make it an image checkbox somehow, but that may be too complicated for the designers - need to take care their images are packed with the page etc. I'd rather have this solved with just HTML or CSS.