Fixed width for table first column

Question

I have a basic table with scrollable body. Doing that I had to set thead and tbody display:block and I also set the width for th and td.

For some reason the first column

Answer 1

remove your first style rule: display:block from tbody and thead

By doing this, you are over-riding the table formatting and layout that display:table provides

thead,
tbody {
 // display: block;
}

Fixed

Answer 2

The width property for DIV & TABLE works differently.

Use max-width & min-width to achieve the results you want:

thead tr th:first-child,
tbody tr td:first-child {
  width: 8em;
  min-width: 8em;
  max-width: 8em;
  word-break: break-all;
}

Edit:

(Editing the answer clarify the working of width in HTML, please point out if I got something wrong or missed anything!)

In divs the width property is used to define the size of the element and the content is fitted in accordingly, irrespective of parent and sibling width.

But in the case of a table, the size of an element is calculated according to content, and the width property gets a lower priority. Even sibling size is taken into consideration. Thus we have to use additional properties, like min-width and max-width to force the size we want!