CSS表格列和表格的x％

Question

我正在准备Asp​​.net网站。在我的样式表上，我希望我的表具有这些属性：

table {
    width:100%;
    height:500px;
}

表的第一列应占整个表的20％。 我的第二栏应占表格的80％。而且我不确定如何在css中设计不同的2列。但我认为它应该是这样的：

table td.first {
}
table td.second {
}

我的问候......

Answer 1

通常以这种方式给表格列赋予一个id：

<table id="my-table">
  <tr>
    <td id="first-column">... content ...</td>
    <td id="second-column">... content ...</td>
  </tr>
</table>

然后你可以用这种方式在css中添加列：

table#my-table {
  width: 100%;
  height: 500px;
}
table#my-table td#first-column {
  width: 20%;
}
table#my-table td#second-column {
  width: 80%;
}

Answer 2

如果我理解正确，您只是尝试定位表格中的特定列。只需给你的<td>个ID：

<td id="columnOne"> ...等

使用此语法在CSS中定位它们...

或者：

table td#columnOne { *styles* }

或简单地说：

#columnOne { *styles* }

这个方法比使用伪类更安全，更兼容，因为我认为你试图这样做，这将是：

table td:first-child { *styles* }

和

table td:nth-child(2) { *styles* }