làm tròn các góc của html bảng cơ

Question

Đây là một fiddle

nỗ lực của tôi để làm tròn các góc của một yếu tố tbody đã không thành công.

tôi đã có thể làm tròn các góc của một yếu tố tr trong tbody như sau

CSS

.tr .rounded-corners { 

    height: 225px; 
    width: 250px; 
    display: inline-block; 
    padding: 10px; 
    margin-top: 10px; 
    box-shadow: 2px 2px 7px #888888; 
    border-radius: 7px; 
    cursor: pointer; 
    cursor: hand; 
} 

Tuy nhiên, khi tôi cố gắng để làm một phong cách tương tự với tbody các góc là không tròn?

.tbody .rounded { 

    background: red; 
    border-radius: 7px; 
} 

Nền xuất hiện màu đỏ.

Answer 1

Nếu bảng của bạn được đặt thành border-collapse: separate (mặc định) thì bán kính đường viền có thể hoặc không được áp dụng cho <tbody>, tùy thuộc vào trình duyệt; hành vi không được xác định trong thông số kỹ thuật.

Theo thông số kỹ thuật — CSS Backgrounds and Borders Module Level 3 (tôi nhấn mạnh):

Hiệu quả của border-radius trên các yếu tố bảng nội là undefined trong Backgrounds CSS3 và Borders, nhưng có thể được định nghĩa trong một tương lai đặc điểm kỹ thuật. U3 CSS3 nên bỏ qua thuộc tính bán kính đường viền được áp dụng cho các phần tử bảng bên trong khi 'thu hẹp biên giới' là 'thu gọn'.

Để có kết quả nhất quán, dựa trên ví dụ của bạn, bạn sẽ phải đặt tbody thành display: blockas suggested in this answer. Điều này sẽ phá vỡ hành vi bảng một chút, nhưng có thể hữu ích.

Answer 2

thử loại này.,

.bodytable { 
    background:blue; 
    border-radius: 7px; 
    display: inline-block; 
}