CODEWITHSUNDEEP
htmlcss
agri
agri

Reputation: 507

Fixed width for table first column

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

Upvotes: 28

Views: 63170

Answers (1)

demonofthemist
demonofthemist

Reputation: 4199

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!

Upvotes: 63

Related Questions