Force table column widths to always be fixed regardless of contents

Question

I have an html table with table-layout: fixed and a td with a set width. The column still expands to hold the contents of text that doesn't contain a space. Is there a way to fix this other than wrapping the contents of each td in a div?

Example: http://jsfiddle.net/6p9K3/29/

<table>     <tbody>         <tr>             <td style="width: 50px;">Test</td>             <td>Testing 1123455</td>         </tr><tr>             <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>             <td>B</td>         </tr>     </tbody> </table>  table {     table-layout: fixed; }  td {     border: 1px solid green;     overflow: hidden; } 

In the example, you can see that the column with AAAAAAAAAAAA... expands despite being explicitly set to 50px wide.

Answer 1

Specify the width of the table:

table {     table-layout: fixed;     width: 100px; } 

See jsFiddle

Answer 2

Try looking into the following CSS:

word-wrap:break-word; 

Web browsers should not break-up "words" by default so what you are experiencing is normal behaviour of a browser. However you can override this with the word-wrap CSS directive.

You would need to set a width on the overall table then a width on the columns. "width:100%;" should also be OK depending on your requirements.

Using word-wrap may not be what you want however it is useful for showing all of the data without deforming the layout.