Question

I have 2 tables on different pages. Both tables have the same first 2 columns. The first column is a TearSheet image, and the second column is a checkbox.

Both can be seen here: http://jsfiddle.net/VH4Q8/1/

I’m having difficulty getting the first 2 columns in both tables to have the same width, even though in each table the first column is assigned the class tearsheet-image and the second column is assigned the class fund-compare-column, which have widths specified as follows:

.tearsheet-image {
    width: 13px;
}

.fund-compare-column {
    width: 13px;
}

What do I need to do in order to make both have the same column widths for the first 2 columns?

Answer 1

In your CSS you have table {width:100%}

This is contradictory to your 13px/13px/250px requirement. So something has to give I guess.

I find the cleanest way to control the column widths of a table is with the <col> element:

<table>
  <col class="tearsheet-image">
  <col class="fund-compare-column">
  <thead>
    ...

… then you don’t have to specify the column’s class on every cell of every row. However not all style properties will be applied if I remember correctly, but widths and backgrounds are, but text-alignment is not :(.