我有一个问题。我有一个用纯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属性,但我的表没有改变边界。
有人能给我个建议吗?
先谢谢你了!
6条答案
按热度按时间50pmv0ei1#
下面是一个应用了边框半径的简化表格。技巧是设置单元格的左边框而不是表格本身。它可以使用或不使用
thead
,我已经注解了css
以显示我在做什么。个字符
3lxsmp7m2#
正如其他人所说,这是应该给予您想要的外观的代码。
代码
个字符
注意事项
不过,要做到这一点,您需要确保将表的
border-collapse
设置为separate
而不是collapse
。否则,单元格的半径和整个表的半径都不起作用。所以仔细检查可能影响你的表的其他CSS,如果你发现
border-collapse: collapse;
在任何地方,那就是问题所在。rn0zuynd3#
字符串
DEMO
vkc1a9a24#
删除表格上的border属性。浏览器仍然支持它,但它是removed from HTML5 specification。该属性产生的效果可能不是你想要的。
如果你想在表格中的每个单元格周围设置边框,只需在CSS中指定,并在其中包含border-radius即可。
即
字符串
如果你只是想在整个表格周围使用边框,那么在表格选择器上使用相同的css:
型
2hh7jdfx5#
border-radius
似乎在table
和td
元素上都可以工作,无论table
上是否有border
属性。你必须有一些其他的CSS规则来发挥作用。
个字符
lsmepo6l6#
基于on作为顺风:
字符串