Add borders on

后端未结

关注

 1  626

In another post I read that if I need to add borders to every row except the header row I should use THEAD & TBODY. So I have added it to the page, but I cannot find how

相关标签:

1条回答

遥遥无期

2021-01-19 15:39
You should use CSS for presentation/styling:
```
tbody {
    border: 1px solid #ccc;
}
```
JS Fiddle demo.

I'm not sure how new you are, but for completeness:
```
<head>
    
    <style type="text/css">

        tbody {
            border: 1px solid #ccc;
        }

    </style>
    
</head>
```
You could also use inline styles in the element's opening tag, for example:
```
<tbody style="border: 1px solid #ccc;">
```
Preferably, though, you'd link to an external stylesheet, this goes into the head of the document:
```
<link href="path/to/stylesheet.css" rel="stylesheet" type="text/css" />
```
Or, if you're targeting those browsers that don't offer the option to style the tbody with a border, you can target specific cells within the tbody using the following:
```
table {
    margin: 0;
    border-spacing: 0;
}

tbody tr td:first-child {
    border-left: 2px solid #000;
}

tbody tr td:last-child {
    border-right: 2px solid #000;
}

tbody tr:first-child td {
    border-top: 2px solid #000;
}

tbody tr:last-child td {
    border-bottom: 2px solid #000;
}
```
JS Fiddle demo.

This does, of course, require a browser that understands and implements the :last-child and :first-child pseudo-classes.
0 讨论(0)
发布评论:

提交评论
- 加载中...