Question

我有一个从表生成器构建的基本表。

我只需要增加第一个表列的大小。但是，下面的代码会增加第一列和第四列。

CSS

    table.paleBlueRows {
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid #FFFFFF;
  width: 85%;
  height: 200px;
  text-align: center;
  border-collapse: collapse;
}
table.paleBlueRows td, table.paleBlueRows th {
  border: 1px solid #0B6FA4;
  padding: 3px 2px;

}
table.paleBlueRows tbody td {
  font-size: 13px;
}
table.paleBlueRows td:nth-child(even) {
  background: #D0E4F5;
}
table.paleBlueRows thead {
  background: #0B6FA4;
  border-bottom: 3px solid #FFFFFF;
}
table.paleBlueRows thead th {
  font-size: 17px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #FFFFFF;
  border-TOP: 2px solid #FFFFFF;
}
table.paleBlueRows thead th:first-child {
  border-left: none;
  width: 8em;
  min-width: 8em;
  max-width: 8em;
}

table.paleBlueRows tfoot td {
  font-size: 14px;
}

以下代码控制列宽

}
table.paleBlueRows thead th:first-child {
  border-left: none;
  width: 8em;
  min-width: 8em;
  max-width: 8em;
}

任何人都可以协助增加第一列吗？

以下是CODEPEN

Answer 1

正在增加第一个标题包的宽度，因为你正在使用CSS选择器table.paleBlueRows thead th：first-child。

虽然第4列也受到影响，因为你有一个行距，而且每列都被选中 - 它是跨越行的第一列。

要解决此问题，您可以使用选择器table.paleBlueRows td：first-child，它只影响表行的第一个td元素。

替换：

table.paleBlueRows td:first-child {
  border-left: none;
  width: 8em;
  min-width: 8em;
  max-width: 8em;
}

使用：

const people = [{
    name: 'Max',
    gender: 'Trans'
  },
  {
    name: 'Sue',
    gender: 'Female'
  },
  {
    name: 'Jake',
    gender: 'Male'
  },
  {
    name: 'John',
    gender: 'Male'
  },
  {
    name: 'Erika',
    gender: 'Female'
  }
];

const findPerson = (persons, name) => {
  return persons.filter((person) => person.name === name);
};

console.log(findPerson(people, 'Erika')[0]);

请查看我的评论笔：https://codepen.io/Rechousa/pen/mXXPwW

Answer 2

如何进行这两项改动：

将#first id分配给第一行。

<th id="first" rowspan="2">Package</th>

更改table.paleBlueRows的名称：first-child to：

#first {
  border-left: none;
  width: 8em;
  min-width: 8em;
  max-width: 8em;
}

仅增加HTML / CSS表中第一列的宽度

2 个答案: