使用 CSS 具有圆角边框的表格

Question

我有一个问题。我有一个用纯 HTML 代码制作的表格，如下：

\n\n

<table id="calendarTable">\n  <tr>\n    <th id="tableHeader" colspan=7></th>\n  </tr>\n  <tr>\n    <th>Dom</th>\n    <th>Seg</th>\n    <th>Ter</th>\n    <th>Qua</th>\n    <th>Qui</th>\n    <th>Sex</th>\n    <th>S\xc3\xa1b</th>\n  </tr>\n  <tbody id="tableBody"></tbody>\n  <tr>\n    <td colspan=7>\n    <p>\n      <form id="dateChooser" name="dateChooser">\n        <select name="chooseMonth" onChange="populateTable(this.form)">\n          <option selected>Janeiro\n          <option>Fevereiro\n          <option>Mar\xc3\xa7o\n          <option>Abril\n          <option>Maio\n          <option>Junho\n          <option>Julho\n          <option>Agosto\n          <option>Setembro\n          <option>Outubro\n          <option>Novembro\n          <option>Dezembro\n        </select>\n        <select name="chooseYear" onChange="populateTable(this.form)">\n        </select>\n      </form>\n    </p>\n    </td>\n  </tr>\n</table>\n

\n\n

这是我的CSS：

\n\n

#calendarTable {\n  text-align: center;\n  width: 80%;\n  height: 100%;\n  color: #18B6E6;\n  border-color: #18B6E6;\n  border: solid 1px;\n  border-radius: 20px;\n}\n\n#calendarTable td {\n  border: solid 1px;\n  border-radius: 4px;\n}\n\n#calendarTable th {\n  border: solid 1px;\n  font-weight: 700;\n}\n

\n\n

我想仅使用 CSS 来圆化边框，我只是尝试使用 border-radius 属性，但我的表格没有更改边框。

\n\n

有人给我提示吗？

\n\n

提前致谢！

\n

Answer 1

这是应用了边框半径的简化表格。诀窍是设置单元格的左边框而不是表格本身。不管有没有 a 都可以工作thead，我已经注释了 thecss以显示我正在做什么。

/*
 * First normalise some of the attributes
 */

table td,
table th {
  padding: .5rem;
  text-align: left;
  vertical-align: top;
}
/*
 * Add the border, set border spacing etc
 * The left width is 0 so cell border can be applied without doubling up.
 */

.table-bordered {
  border: 1px solid silver;
  border-left-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 1rem;
}
/*
 * Add the border to table cell/header
 */

.table-bordered td,
.table-bordered th {
  border-top: 1px solid silver;
  border-left: 1px solid silver;
}
/*
 * Remove the top border from the first header/cell
 */

.table-bordered tbody:first-child tr:first-child td,
.table-bordered thead:first-child tr:first-child th {
  border-top-width: 0;
}
/*
 * Set the border radius for the first header/cell
 */

.table-bordered thead:first-child tr:first-child td:first-child,
.table-bordered thead:first-child tr:first-child th:first-child {
  border-top-left-radius: 1rem;
}
/*
 * Set the border radius for the last header/cell
 */

.table-bordered tbody:last-child tr:last-child td:first-child,
.table-bordered tbody:last-child tr:last-child th:first-child {
  border-bottom-left-radius: 1rem;
}

<table class="table-bordered">
  <thead>
    <tr>
      <th scope="col">Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Data</th>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <th scope="row">Data</th>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <th scope="row">Data</th>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>