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

【问题标题】：Increase width of first column in HTML/CSS table only仅增加 HTML/CSS 表格中第一列的宽度
【发布时间】：2018-07-29 04:23:13
【问题描述】：

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

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

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

【问题讨论】：

标签： css-tables tablecolumn

【解决方案1】：

因为您使用的是 CSS 选择器 table.paleBlueRows thead th:first-child，所以它增加了第一个标题包的宽度。

虽然，第 4 列也受到影响，因为您有一个行跨度并且列 Each 也被选中 - 它是跨行行的第一列。

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

替换：

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

与：

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

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

【讨论】：

【解决方案2】：

只做这两个改变怎么样：

将#first id 分配给您的第一行。

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

将 table.paleBlueRows thead th:first-child 的名称更改为：

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

【讨论】：