我正在使用
border-collapse: separate
属性来添加表格行之间的间距,并且我想删除第一个表格行上方的间距。最好的方法是什么?
这就是我的桌子现在的样子。
下面是我的代码
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<style>
.table-container {
width: 400px;
background-color: grey;
padding: 0px 10px 10px 10px;
}
table {
border-collapse: separate;
border-spacing: 0px 7px;
width: 100%;
}
tr {
background-color: #dc2626;
color: white;
}
td {
padding: 5px;
}
tbody tr td:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
tbody tr td:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<tbody>
<tr><td>value 1</td><td>value2</td></tr>
<tr><td>value3</td><td>value4</td></tr>
</table></tbody>
</table>
</div>
<script>
</script>
</body>
</html>
我尝试使用
border-collapse: collapse
属性并设置 border-bottom
,这成功地删除了第一行上方的间距,但是,圆角不起作用。下面是代码示例。
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<style>
.table-container {
width: 400px;
background-color: grey;
padding: 0px 10px 10px 10px;
}
table {
border-collapse: collapse;
width: 100%;
}
tr {
background-color: #dc2626;
color: white;
border-bottom: 7px solid grey;
}
td {
padding: 5px;
}
tbody tr td:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
tbody tr td:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<tbody>
<tr><td>value 1</td><td>value2</td></tr>
<tr><td>value3</td><td>value4</td></tr>
</table></tbody>
</table>
</div>
<script>
</script>
</body>
</html>
有没有办法同时实现这两个目标 - 删除第一行上方的间距并在所有表格行上设置圆角?
属性
border-spacing: 0px 7px;
负责行之间的空间以及第一行上方的空间。
根据我尝试的几种方法,您可以尝试通过以下方式消除第一行上方的空格:
border-spacing: 0px 7px;
样式margin-top: -7px
添加到表或表容器中。*解决方案1请参见下面的示例;
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<style>
.table-container {
width: 400px;
background-color: grey;
padding: 0px 10px 10px 10px;
}
table {
border-collapse: separate;
width: 100%;
}
tr {
background-color: #dc2626;
color: white;
}
td {
padding: 5px;
}
tbody tr td:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
tbody tr td:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<tbody>
<tr><td>value 1</td><td>value2</td></tr>
<tr><td>value3</td><td>value4</td></tr>
</table></tbody>
</table>
</div>
<script>
</script>
</body>
</html>