html – 使用CSS的带圆角边框的表格

概述我有一个问题.我有一个用纯 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< 我有一个问题.我有一个用纯 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属性,但我的表没有更改边框.

有人给我一个提示吗？

提前致谢！

解决方法 正如其他人所说,这是应该给你想要的外观的代码.

码

#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设置为分离而不是为表折叠.否则,单元格的半径和整个表格的半径都不起作用.

因此,请查看可能影响您的表的其他CSS.如果你发现边界崩溃：崩溃;在任何地方,这都是问题所在.

总结

以上是内存溢出为你收集整理的html – 使用CSS的带圆角边框的表格全部内容，希望文章能够帮你解决html – 使用CSS的带圆角边框的表格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。