表第一列的固定宽度 [英] Fixed width for table first column

问题描述

我有一个带有可滚动主体的基本表。这样做，我必须设置thead和tbody display：block，还设置th和td的宽度。

由于某种原因，第一列th不能对齐与第一列tds。
谁能告诉我是什么原因造成的？

CSS

  thead，
 tbody {
 display：block; 
} 
 
 thead {
 text-align：left; 
} 
 
 tbody {
背景：黄色； 
overflow-y：自动; 
身高：6em； 
} 
 
 thead th，
 tbody td {
 width：4em; 
填充：2px； 
} 
 
 thead tr th：第一个孩子，
 tbody：td：第一个孩子{
 width：8em; 
背景：鲑鱼； 
 font-weight：正常； 
} 
  

这是小提琴

解决方案

width属性为 DIV & TABLE 的工作方式不同。

使用最大宽度和; 最小宽度来获得所需的结果：

  thead tr th ：first-child，
 tbody tr td：first-child {
 width：8em; 
最小宽度：8em； 
最大宽度：8em； 
断字：全力以赴； 
} 
  

编辑：

（编辑答案阐明了HTML宽度的工作原理，请指出我是错还是遗漏任何东西！）

在divs中，width属性用于定义元素的大小，并相应地适应内容，而不考虑父级和同级宽度。

在表的情况下，元素的大小是根据内容计算的，而width属性的优先级较低。即使是兄弟大小也要考虑在内。因此，我们必须使用其他属性，例如最小宽度和最大宽度来强制我们想要的大小！ / p>

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

解决方案

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!

这篇关于表第一列的固定宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！