html - 创建圆形替代表 css 类

标签 html css

我想为围绕表格和替代行颜色(灰色和白色)的元素创建一个类。第一行作为页眉样式(负),最后一行作为页脚。

现在我将第一行第一个单元格的左上角改为圆 Angular ,第一行最后一个单元格右上角也变成圆 Angular ...

这不是好的解决方案。谁能帮帮我?

最佳答案

使用当前样式,您的问题已解决:

<html>
<head>
<style>
    table#t01 td{
        padding:5px;
        border: 1px gray solid;
    }
    table#t01 tr:nth-child(even) {
        background-color: #eee;
    }
    table#t01 tr:nth-child(odd) {
        background-color: #fff;
    }
    table#t01 tr:first-child td:first-child {
        border-top-left-radius: 10px;
    }
    table#t01 tr:first-child td:last-child {
        border-top-right-radius: 10px;
    }
    table#t01 tr:last-child td:first-child {
        border-bottom-left-radius: 10px;
    }
    table#t01 tr:last-child td:last-child {
        border-bottom-right-radius: 10px;
    }
</style>
</head>
<body>
<table id="t01" cellspacing="0" align="center">
<tr>
    <td>first row - first cell</td>
    <td>first row - second cell</td>
    <td>first row - third cell</td>
</tr>
<tr>
    <td>second row - first cell</td>
    <td>second row - second cell</td>
    <td>second row - third cell</td>
</tr>
<tr>
    <td>third row - first cell</td>
    <td>third row - second cell</td>
    <td>third row - third cell</td>
</tr>
<tr>
    <td>forth row - first cell</td>
    <td>forth row - second cell</td>
    <td>forth row - third cell</td>
</tr>
<tr>
    <td>fifth row - first cell</td>
    <td>fifth row - second cell</td>
    <td>fifth row - third cell</td>
</tr>
</table>
</body>
</html>

关于html - 创建圆形替代表 css 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50554972/

相关文章:

Jquery UI 选项卡 - 将整个 Div/容器居中

javascript - 选择下拉滚动样式

javascript - 如何使用 jquery 中的 name 属性突出显示所选表格行的颜色

javascript - 使用ajax将参数发送到iframe

html - css样式表问题

css - 我网页中的 Div 不会跨越页面的 100% 宽度

javascript - 如何使用 jQuery 为 IE8 设置背景图像(使用过滤器属性)?

ruby-on-rails - 如何将图标与记录链接,但将其显示在远离记录部分的位置?

html - upvote/downvote 箭头如何将操作提交给 Stack Overflow?

html - 这两个 block 元素之间不应该有任何空间