Question

I am trying to align different tables with different amount of columns so the first two columns are align and the rest are independently align but using % it is very difficult and when resizing window it losses alignment.

That is why I was trying to align mixing with % and px on td, ex.

<table>
  <tr>
    <td width="100px"></td>
    <td width="100px"></td>
    <td width="50%"></td>
    <td width="20%"></td>
 </tr>
</table>
<table>
 <tr>
   <td width="100px"></td>
   <td width="100px"></td>
   <td width="70%"></td>
 </tr>
</table>

But As does not look logical it does not seem to work.

Is there any way to get this working or an alternative?

Answer 1

You will have to use the colspan attribute to do this. Tables are designed such that there are discrete rows and columns, where the number of columns in a table is equal to the largest number of TD elements in any row + the number of columns those cells span (default of 1). So, you need to figure out some base unit for a column in your table, and then have the cells be multiples of that base.

One thing to remember is that any row that has fewer columns specified in it (both single TD columns and TDs that span more than 1 column) will fill in as many columns as it can, left to right (unless rtl text is specified in the CSS), so you can have rows of differing numbers of columns, because a TD cell cannot spill out of it’s column unless a colspan attribute is set (in other words, a TD has to occupy an integer number of columns, not partial columns)

---

EDIT:
You can only use the method I have described when you are dealing with only 1 table. To align 2 tables, wrap them both in a parent element (DIV), and then give both tables a width of 100%. You can then control the width of the div, which will make the tables inside use all available space. The problem then becomes one where you just have to make sure the tables fill up the space in the same way, which is easier because it is more controlled.