Question

我想制作一个没有标题，第2列的表，第一行的第一个单元格跨度为表格的65％，第二行的第一个单元格跨度为表格的20％。

这是第一列的2种CSS选择器：

.image:first-of-type{
 width:40px;
}

.image:last-of-type{
 width:40px;
}

我该怎么做？

编辑：这是我的解决方案，但没有用

 #myTable > tbody > tr:nth-child(1) > td:nth-child(1)

 #myTable > tbody > tr:not(:first-child) > td:nth-child(1)

Answer 1

我会很简单地利用网格：

.myTable {
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.myTable first-row {
  grid-template-columns: 65px 35px;      
}

.myTable second-row {
  grid-template-columns: 20px 80px;
}

Answer 2

我建议对要设置样式的单元格使用类。因为任何更改都会破坏您的风格。

table, tr, td {
    border: 1px solid black;
    border-collapse: collapse;
}

tr {
  display: flex;
}

.flexCell {
  flex-grow: 1;
}

.firstCell {
  width: 65%;
}

.secondCell {
  width: 20%;
}

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td class="firstCell">
            Column one
          </td>
          <td class="flexCell">
            Column two
          </td>
        </tr>
        <tr>
          <td class="secondCell">
            Column one (second row)
          </td>
          <td class="flexCell">
            Column two (second row)
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

我使用flex-grow使其他两个单元格填满了表格的其余部分。

CSS中的样式表

2 个答案: