css - 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">... ETC

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

任何一个：

table td#columnOne { *styles* }

或者简单地说：

#columnOne { *styles* }

这种方法比使用伪类更安全、更兼容，我认为你正在尝试这样做，这将是：

table td:first-child { *styles* }

和：

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