html - 使用 CSS 的圆 Angular 表格

Question

我有一个问题。我有一个用纯 HTML 代码制作的表格，就在这里:

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

这是我的 CSS:

#calendarTable {
  text-align: center;
  width: 80%;
  height: 100%;
  color: #18B6E6;
  border-color: #18B6E6;
  border: solid 1px;
  border-radius: 20px;
}

#calendarTable td {
  border: solid 1px;
  border-radius: 4px;
}

#calendarTable th {
  border: solid 1px;
  font-weight: 700;
}

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

谁能给我一些建议？

提前致谢!

Answer 1

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

/*
 * 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>