Question

in my stylesheet:

table.fixed { table-layout:fixed; }
table.fixed td, th { overflow: hidden; }

in my view:

<table class="fixed">
  <col width="20px" />
  <col width="300px" />
  <col width="50px" />
  <% @reviewers.each do |r| %>
    <tr>
      <td><%= r.first_name %></td>
      <td><%= r.last_name %></td>
      <td><%= r.email %></td>
    </tr>
  <% end %>
</table>

1. I set the first column width too
   narrow to test the overflow.
2. I set the second column width too
   long to test whether the column
   width is set.

Neither overflow or column width is working in Firefox or Safari.

Thanks.

Update
Working Fiddle here: http://jsfiddle.net/46jXM/

Answer 1

You can use word-wrap:break-word. But you’ll have to specify a width for the table.

table.fixed { table-layout:fixed; word-wrap:break-word; width:100% }

You can also leave the word-wrap:break-word, but then the text in the different columns overlaps.