Make one table column wider with css

Question

I tried to follow the instructions on this post: Table with table-layout: fixed; and how to make one column wider because I'm also trying to make the first column wider, but for some reason it is not working. I suspect my .wide class is in the wrong place. I'm using the Ransack gem to generate the search results in this table.

My css looks like this:

table#advanced {

  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif {
  width: 100%;
  border-collapse: collapse;
  }


  th, td {
    font-size: 1em;
    border: 1px solid $secondary-text-color;
    padding: 3px 7px 2px 7px;
    }

  th {
    font-size: 1.1em;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: darken($primary-background-color, 30%);  
    } 

  tr.even_line { background-color: $primary-background-color; }
  tr.odd_line { background-color: #FFFFFF; }

  .even_line:hover { color: $secondary-background-color; }
  .odd_line:hover { color: $secondary-background-color; }

  a:link {
    color: #000000;
  }

  a:visited {
    color: #000000;
  }

  a:hover {
    color: $secondary-background-color;
    background-color: transparent;
    font-weight: bold;
  }

  a:active {
    color: #0000FF;
  }
}

And my view looks like this:

<table id="advanced">
  <tr>
    <th><%= sort_link @q, :title, "Title" %></th>
    <th><%= sort_link @q, :gender, "Type" %></th>
    <th><%= sort_link @q, :size, "Size" %></th>
    <th><%= sort_link @q, :price, "Price" %></th>
    <th><%= sort_link @q, :condition, "Condition" %></th>
    <th><%= sort_link @q, :material, "Material" %></th>
    <th><%= sort_link @q, :wash, "Wash" %></th>
    <th><%= sort_link @q, :color, "Color" %></th>
    <th><%= sort_link @q, :waist, "Waist" %></th>
    <th><%= sort_link @q, :hips, "Hips" %></th>
    <th><%= sort_link @q, :front_rise, "Front Rise" %></th>
    <th><%= sort_link @q, :inseam, "Inseam" %></th>
    <th><%= sort_link @q, :leg_opening, "Leg Opening" %></th>
  </tr>

  <% @products.each do |product| %>
    <tr class=<%= cycle('even_line', 'odd_line') %>>
      <td><%= link_to(product.title, product) %></td>
      <td><%= product.gender %></td>
      <td><%= product.size %></td>
      <td><%= number_to_currency(product.price) %></td>
      <td><%= product.condition %></td>
      <td><%= product.material %></td>
      <td><%= product.wash %></td>
      <td><%= product.color %></td>
      <td><%= product.waist %></td>
      <td><%= product.hips %></td>
      <td><%= product.front_rise %></td>
      <td><%= product.inseam %></td>
      <td><%= product.leg_opening %></td>
    </tr>
  <% end %>
</table>

Answer 1

Your style is saying for each th cell to be 35% wide and td cell to be 65% wide.

I would remove those and the wide class from the col tag.

You could make your first td like this:

<td class="wide">

Or you could make a class for td:first-child