Defining cell width

When formatting cells there are things you must consider in order to have the fields take up the needed amount of space.
See below for several examples of label width vs. field width and the results from each setup:
The right fields appearing too small, occurs because the width value applied to the label in the top two examples is applied to the cell element (<td style="width: 100%;">). However, while the default width value for the field (also 100%) is applied to the field itself via CSS, its parent cell has no width value. Thus, the first cell takes up all of the available space, but the field takes up 100% of the available space of its parent cell which, again, has no width.
The solution here is to either apply an absolute or smaller percentage width value to the field, and/or apply a width value to the field itself.
See below for a more detailed diagram:
The first cell has been told to take up all of the available space.
The second cell has been told to not care at all, so it takes up only enough space to display the field.
The field by default takes up all of the available space of the second cell.
The browsers are interpreting the values and rendering the elements correctly.
Again, the resolution is to give the first cell (Width, in Design) a lesser value, or give the field (Width (Pixels)) a value of its own.

Related Articles