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 th doesn't line up with the first column tds. Can anyone tell me what causes that?

CSS

 thead,
 tbody {
  display: block;
 }

 thead {
  text-align: left;
 }

 tbody {
  background: yellow;
  overflow-y: auto;
  height: 6em;
 }

 thead th,
 tbody td {
  width: 4em;
  padding: 2px;
 }

 thead tr th:first-child,
 tbody tr td:first-child {
  width: 8em;
  background: salmon;
  font-weight: normal;
 }

Here is the Fiddle

Answer 1

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!

Answer 2

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