Disable auto-resize width in table HTML

Question

I want to disable the auto-resize for the width of <td>s in my <Table> Some cells have very large data and I don't want them to expand and therefore make a horizontal scroll on the bottom of the page. I tried setting the width for each <th> and <td> individually but it didn't work.

Any reason why?

PS: The table is in an ASP Repeater

Answer 1

Instead of setting the width for each element use the max-width 100% .To get word wrapping in modern browsers, use white-space. Also, setting max-width seems to help get things working.

Hope the below will helps.

td {
  border: 1px solid black;
  width: 100px;
  max-width: 100px;
  white-space: pre-wrap;        /* css */
  white-space: -moz-pre-wrap;   /* Mozilla */
  white-space: -pre-wrap;       /* Chrome*/
  white-space: -o-pre-wrap;     /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}