align 2 table column widths with each other

Why not put them in the same table? It seems they are semantically similar. http://jsfiddle.net/askhe/5/


No need to merge tables, you can use this

table-layout: fixed;

There is a wonderful article here about it https://css-tricks.com/fixing-tables-long-strings/


table elements where meant for scientific data, such as probes from experiments, not for actual layout:

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

While you're not using them for layout, your problem is actually a rendering/layout issue. The easiest solution to this is to merge both tables into one (jsfiddle).

If you prefer your data to be encapsulated in many little tables instead of one giant table you'll need to specify a width for almost all columns.

Tags:

Html

Css