有一个干净的方式来获得边界< tbody />在纯CSS？ [英] Is there a clean way to get borders on a <tbody /> in pure CSS?

问题描述

我想在< tbody /> 上设置背景和圆形边框，例如

  tbody {border-radius：15px; border：1px solid black; background：#ccf; } 
  

但是，当我在 Codepen ，边框和背景颜色显示，但< tbody /> 仍有方角。

我可以使用一系列：last-child 和解决这个问题：first -child 选择器将半径应用于角上的个人 td ，例如

  tbody tr：first-child td：first-child {border-top-left-radius：15px; } 
  

这个版本做了我想要的（至少，在firefox下），但也感觉非常冗长和hacky，一个问题，只有当我添加的前缀版本兼容性（ -moz - ， -webkit - 等），并支持< th /元素除< td /> 。是否有一个简洁的，纯粹的方式来获得这个行为？

解决方案

假设你折叠了表中的边框，在 tbody 上设置 display：block 并应用 border-radius 。

Codepen示例

CSS

  
 width：100％; 
 border-collapse：collapse; 
 display：block; 
 width：600px; 
} 
 
 tbody {
 background：#ccf; 
 border：1px solid black; 
 border-radius：15px; 
 display：block; 
} 
 
 th，td {
 width：200px; 
} 
 
 td，th {
 padding：5px; 
 text-align：center; 
} 
  

I'd like to set a background and a rounded border on a <tbody/>, such as

tbody { border-radius: 15px; border: 1px solid black; background: #ccf; }

However, when I try this in Codepen, the border and background color display, but the <tbody/> still has square corners.

I'm able to work around this problem using a series of :last-child and :first-child selectors to apply the radius to individual tds on the corners, as for example

tbody tr:first-child td:first-child { border-top-left-radius: 15px; }

This version does what I want (at least, under firefox) but also feels extremely verbose and hacky, a problem that'll only get worse when I add the prefixed versions for compatibility (-moz-, -webkit- etc), and support for <th/> elements in addition to <td/>. Is there a succinct, pure-css way of getting this behavior?

解决方案

Assuming you have collapsed the borders in the table, simply set display:block on the tbody and apply the border-radius.

Codepen example

CSS

table {
    width: 100%;
    border-collapse: collapse;
    display: block;
    width: 600px;
}

tbody {
    background: #ccf;
    border: 1px solid black;
    border-radius: 15px;
    display: block;
}

th, td {
    width: 200px;
}

td, th {
    padding: 5px;
    text-align: center;
}

这篇关于有一个干净的方式来获得边界< tbody />在纯CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！