时间戳

首页 > 解决方案 > 尝试更改表格边框，不会从当前大小更改

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

问题描述

警告：我实际上才刚刚开始学习 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>

标签： htmlcss

解决方案

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

推荐阅读