尝试更改表格边框，不会从当前大小更改答案

【问题标题】：Trying to change table border, won't change from current size尝试更改表格边框，不会从当前大小更改
【发布时间】：2021-02-07 01:15:02
【问题描述】：

警告：我才刚刚开始学习 HTML/CSS。

我正在尝试增加下部单元格的边框大小。但是，当我尝试将边框的大小更改为 2px 时，它只是保持其当前大小。只有外边框。

我的最终目标是外边框实心 3px，内边框点缀 2px。

td:first-child {
  border-left: 3px solid lightgrey;
  border-right: 2px dotted lightgrey;
  border-bottom: 2px dotted lightgrey;
}

td {
  border-right: 2px dotted lightgrey;
  border-bottom: 2px dotted lightgrey;
}

id=cell9 {
  border-bottom: 3px solid lightgrey;
}

id=cell6 {
  border-bottom: 3px solid lightgrey;
}

id=cell3 {
  border-bottom: 3px solid lightgrey;
}

td:last-child {
  border-right: 3px solid lightgrey;
  border-bottom: 2px dotted lightgrey;
}

th:first-child {
  border-top-left-radius: 10px;
}

th:last-child {
  border-top-right-radius: 10px;
}

tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

th,
td {
  padding: 15px;
}

table,
th,
td {
  border-spacing: 0px;
}

<html>

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>testing</title>
  <link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>

<body>
  <table style="width:25%">
    <tr id="row1">
      <th id="cell1" bgcolor=lightgrey>Firstname</th>
      <th id="cell2" bgcolor=lightgrey>Lastname</th>
      <th id="cell3" bgcolor=lightgrey>Age</th>
    </tr>
    <tr id="row2">
      <td id="cell4">Jill</td>
      <td id="cell5">Smith</td>
      <td id="cell6">50</td>
    </tr>
    <tr id="row3">
      <td id="cell7">Eve</td>
      <td id="cell8">Jackson</d>
        <td id="cell9">94</td>
    </tr>
  </table>
</body>

</html>

【问题讨论】：

由于您似乎了解大多数 css 定位规则，我认为这可能只是一个简单的 typeo。但是你有一些例子，你尝试像id=cell9 这样不针对任何东西。应该是#cell9 或[id=cell9] 如果你真的想去属性选择器developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors
非常感谢！更改效果很好。

标签： html css

【解决方案1】：

为了帮助您解决问题，我不得不稍微更改您的代码以减少额外的样式并使样式更简单+可维护（查看完全继承样式的更大表）。

我将实心边框 + 边框半径应用于整个表格

table {
  border: 3px solid lightgrey;
  border-radius: 10px;
}

为整个表头应用背景：

th {
  background-color: lightgrey;
}

这两种样式用于单元格上的虚线边框（我使用+ selector 排除第一个孩子）。

td+td {
  border-left: 2px dotted lightgrey;
}

tr+tr td {
  border-top: 2px dotted lightgrey;
}

希望这对您进一步学习有所帮助！尝试了解这种方法的想法，在这种方法中您尝试使用最常见的选择器，编写更少的单独样式，这将使您的代码在未来更容易支持和扩展。

table {
  border: 3px solid lightgrey;
  border-radius: 10px;
}

th {
  background-color: lightgrey;
}

td+td {
  border-left: 2px dotted lightgrey;
}

tr+tr td {
  border-top: 2px dotted lightgrey;
}

th,
td {
  padding: 15px;
}

table {
  border-spacing: 0px;
}

<table style="width:25%">
  <thead id="row1">
    <tr>
      <th id="cell1">Firstname</th>
      <th id="cell2">Lastname</th>
      <th id="cell3">Age</th>
    </tr>
  </thead>
  <tr id="row2">
    <td id="cell4">Jill</td>
    <td id="cell5">Smith</td>
    <td id="cell6">50</td>
  </tr>
  <tr id="row3">
    <td id="cell7">Eve</td>
    <td id="cell8">Jackson</td>
    <td id="cell9">94</td>
  </tr>
</table>

<table style="margin-top: 20px">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
  </thead>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

将 id=cell9、id=cell6 和 id=cell3 更改为 #cell7、#cell8 和 #cell9。

【讨论】：