使用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

#calendarTable{

    border-radius:20px;
}

DEMO

Answer 2

删除表格上的border属性。浏览器仍然支持它，但它是removed from HTML5 specification。属性产生的效果可能不是你想要的。

如果你想在表格中的每个单元格周围边框，只需在CSS中指定它并在那里包含border-radius。

即

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

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

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

Answer 3

border-radius似乎同时适用于table和td元素，border上有table属性或没有table { border: 1px solid blue; border-radius: 10px; } table td, table th { border: 1px solid gray; border-radius: 10px; padding: 5px; }属性。

您必须制定一些其他CSS规则。

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

买者

要实现这一点，您需要确保border-collapse设置为separate而不是collapse。否则，单元格的半径和整个表格的半径都不起作用。

请查看可能影响您的表格的其他CSS。如果您在任何地方找到border-collapse: collapse;，那就是问题所在。

Answer 5

这是一个应用了边框半径的简化表格。诀窍是设置单元格的左边框而不是表格本身。它可以使用或不使用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>