How to specify table column width to a fixed size in HTML?

Question

I have a table just with a couple of rows and columns in it. What I am stuck with is the width of the column whenever the length of the field increases

So, say, just for instance, I have a table as:

<table>
  <thead>
    <tr>
     <th>column1</th>
     <th>column2</th>
    </tr>
  </thead>

  <tbody>
    <tr>
     <td>valuenfkdkfkdsnfndfndnkffdfndsfnndfnksfnfsfsdnsffs</td>
     <td>value2</td>
    </tr>
  </tbody>
</table>

with a value which has field length of 35-50 characters like the one in the first "td" tag, the table goes out of the prescribed webpage area.

I used {word-wrap: break-word;} but there seems to be no effect. Is there a way to cut of the field length to the next line whenever this is the case and set the column width to a fixed size?

Possible duplicate of [Word-wrap in an HTML table](http://stackoverflow.com/questions/1258416/word-wrap-in-an-html-table) — BSMP, Mar 25 '16 at 17:22
I think this is related to [this post](https://stackoverflow.com/questions/4185814/fixed-table-cell-width). There should be all you need in it... — nox, Mar 25 '16 at 17:22

score 1 · Answer 1 · answered Mar 25 '16 at 17:26

You might be looking for CSS property table-layout:fixed

<table class="users" style="table-layout:fixed;">
  <tbody>
    <tr>
      <td>0001</td>
      <td>Johnny Five</td>
    </tr>
 </table>

OR

CSS:

table.users{table-layout:fixed;}

Source: https://css-tricks.com/fixing-tables-long-strings/

How to specify table column width to a fixed size in HTML?

1 Answers1