Question

我的时区下午好。

我有一张包含四个tr的表格，每个tr有四个td。

我想对每个td应用不同的宽度。例如，我想要以下内容：

<tr>
   <td width="20%"/>
   <td width="25%"/>
   <td width="10%"/>
   <td width="45%"/>
</tr>

有没有办法只有一个类应用于tr并且在该类中我给每个td一个宽度？或者我创建四个不同的类，每个类具有不同的宽度？像

这样的东西

.firstTD{
    width:20%; 
} 
.secondTD{
   width:25%; 
} 
.thirdTD{
   width:10%; 
} 
.fourTD{
  width:45%; 
}

这也应该在Internet Explorer 6中得到支持。

提前致谢。最好的问候

Answer 1

您可以使用相邻的选择器：

.mytable td{
    width:20%; 
} 
.mytable td+td{
   width:25%; 
} 
.mytable td+td+td{
   width:10%; 
} 
.mytable td+td+td+td{
  width:45%; 
}

就像那样你不需要任何类，但我会给表一个，或者你的所有表都会继承那些样式。显然。

Answer 2

您不需要使用多个类。 adjacent selector让你了解。

td { width: 20%; }
td + td { width: 25%; }
td + td + td { width: 10%; }
td + td + td + td { width: 45%; }

Answer 3

如果您希望每个td的宽度不同，则需要创建不同的类。您可以在tr上设置宽度，但它会将单元格分成相等的部分或足以将数据保存在其中。

Answer 4

您可以使用应用于表（或tbody）的单个类并使用

.yourclass td { /* first td */ }
.yourclass td + td { /* 2nd td */ }
.yourclass td + td + td{ /* 3rd td */ }
.yourclass td + td + td + td { /* 4th td */ }

请考虑以这种方式编写的规则也将应用于以下所有规则，因此仅使用此规则来设置和覆盖特定属性。

如果您不需要支持较旧的IE版本，您也可以使用nth-child 示例

.yourclass tr td:nth-child(2) { /* 2nd td */ }

注意：该类并非严格必要，但如果您有多个表，则此样式将仅以这种方式影响您想要样式的元素。

Answer 5

你可以在tr中定义一个类并使用：nth-child（n）选择器给每个td一个单独的宽度

<tr class="myrow">
   <td />
   <td />
   <td />
   <td />
</tr>

css可以如下提供，

.myrow td:nth-child(1){
    width:20%; 
} 
.myrow td:nth-child(2){
   width:25%; 
} 
.myrow td:nth-child(3){
   width:10%; 
} 
.myrow td:nth-child(4){
  width:45%; 
}

但这适用于支持CSS3的浏览器。它将从IE9开始支持。

Answer 6

唯一的方法是按照你的建议，为每个TD创建一个CSS类。在任何情况下，TD的class属性仅用于第一行，因为后续的属性将继承width值。

根据顺序设置表格列宽

6 个答案: