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

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>

Answer 2

正如其他人所说，这是应该给出您想要的外观的代码。

代码

#RoundedTable {
  border: 1px solid black;
  border-radius: 10px;
}
#RoundedTable td, #RoundedTable th {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 3px;
}

<table id="RoundedTable">
  <tr><th>Table header</th><th>Another header cell</th></tr>
  <tr><td>Table cell...</td><td>More data...</td></tr>
  <tr><td>Table cell...</td><td>More data...</td></tr>
  <tr><td>Table cell...</td><td>More data...</td></tr>
  <tr><td>Table cell...</td><td>More data...</td></tr>
</table>

注意事项

为此，您需要确保将表格的

border-collapse

设置为

separate

而不是

collapse

。否则，单元格的半径和整个表格的半径都不起作用。

因此请查看可能影响您的表格的其他 CSS。如果您在任何地方发现

border-collapse: collapse;

，那就是问题所在。

Answer 3

#calendarTable{

    border-radius:20px;
}

演示

Answer 4

删除表格上的边框属性。浏览器仍然支持它，但它已从 HTML5 规范中删除。无论如何，属性产生的效果可能不是你想要的。

如果您想要表格中每个单元格周围都有边框，只需在 CSS 中指定并在其中包含边框半径即可。

即

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

如果您只想在整个表格周围添加边框，请在表格选择器上使用相同的 CSS：

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

Answer 5

border-radius

似乎适用于

table

和

td

元素，无论

border

上有或没有

table

属性。

您必须有一些其他 CSS 规则发挥作用。

table {
  border: 1px solid blue;
  border-radius: 10px;
}
table td, table th {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 5px;
}

<table border=1>
  <tr>
    <th>Table header...</th>
  </tr>
  <tr>
    <td>Table cell...</td>
  </tr>
  <tr>
    <td>Table cell...</td>
  </tr>
  <tr>
    <td>Table cell...</td>
  </tr>
  <tr>
    <td>Table cell...</td>
  </tr>
</table>

Answer 6

基于on作为顺风：

.table-bordered {
    @apply w-full border-separate border-spacing-0 overflow-clip rounded-lg border border-l-0;
}

.table-bordered td,
.table-bordered th {
    @apply border-l border-t text-left align-top;
}

.table-bordered tbody:first-child tr:first-child td,
.table-bordered thead:first-child tr:first-child th {
    @apply border-t-0;
}

.table-bordered thead:first-child tr:first-child td:first-child,
.table-bordered thead:first-child tr:first-child th:first-child {
    @apply rounded-tl-lg;
}

.table-bordered tbody:last-child tr:last-child td:first-child,
.table-bordered tbody:last-child tr:last-child th:first-child {
    @apply rounded-bl-lg;
}