css设置table圆角边框不起作用是什么原因


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

#table_wrap > table {

font-size: 16px;

text-align: center;

margin: 0 auto;

border-collapse: separate;

border-spacing: 0;

border: 2px #000;

}

table thead tr,table tbody tr {

height: 50px;

line-height: 50px;

/*background-color: pink;*/

}

table tr th:first-child,table tr td:first-child {/*设置table左边边框*/

border-left: 2px solid #eaeaea;

}

table tr th:last-child,table tr td:last-child {/*设置table右边边框*/

border-right: 2px solid #eaeaea;

}

table tr td:first-child,

table tr td:nth-child(2),

table tr td:nth-child(3),

table tr td:last-child{/*设置table表格每列底部边框*/

border-bottom: 2px solid #eaeaea;

}

/*table tr:last-child td:first-child,

table tr:last-child td:nth-child(2),

table tr:last-child td:nth-child(3),

table tr:last-child td:last-child{/!*设置table表格最后一列底部边框*!/

border-bottom: 2px solid #000;

}*/

table tr th {

background: #eaeaea;

}

table tr:first-child th:first-child {

border-top-left-radius: 12px;

}

table tr:first-child th:last-child {

border-top-right-radius: 12px;

}

table tr:last-child td:first-child {

border-bottom-left-radius: 12px;

}

table tr:last-child td:last-child {

border-bottom-right-radius: 12px;

}

</style>

</head>

<body>

<div id="table_wrap">

<table width="800" cellspacing="0" cellpadding="0">

<thead>

<tr>

<th>头部1</th>

<th>头部2</th>

<th>头部3</th>

<th>头部4</th>

</tr>

</thead>

<tbody>

<tr>

<td>1内容1</td>

<td>1内容2</td>

<td>1内容3</td>

<td>1内容4</td>

</tr>

<tr>

<td>2内容1</td>

<td>2内容2</td>

<td>2内容3</td>

<td>2内容4</td>

</tr>

<tr>

<td>3内容1</td>

<td>3内容2</td>

<td>3内容3</td>

<td>3内容4</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

实现效果:

c75a77ff4abad2d1955a6b8e64d2814.png

相关推荐:CSS教程

以上就是css设置table圆角边框不起作用是什么原因的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

样式表css有哪几种类型

css怎么隐藏li

css 括号是什么

jquery attr与css区别是什么

如何在css中实现并排生成多行的dt和dd

css是什么,它的优点有哪些

怎么在css中改变光标样式

css怎么实现不可点击功能样式

css怎么设置table颜色

css怎么更改超链接字体颜色

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...