从选定行中移除单元格边框间距

是否可以删除所选行/单元格之间的边界间距?我想去掉"内容"之间的空格单元格，并将其显示为一行。我试图添加border-spacing为选定的行，但它似乎不工作

下面是我的代码

<html>
<head>

<style>

.flex_container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.inner {
height:1000px;
width: 900px;
background-color:#000;

background-size: cover;
color: white;
display: flex;
/* justify-content: center;
align-items: center;
*/
}

.table-border {
border-collapse: separate;
border-spacing: 6px 5px;
table-layout: fixed;
color: white;
font-size: 15px;
display: inline-block;
}
.table-border tr th {
background-color: rgb(255,255,255,0.6);
border-radius: 2px;
padding-right: 35px;
padding-left: 35px;
padding-top: 10px;
padding-bottom: 10px;
}
.content-inner {
margin-top: 250px;
margin-left: 50px;
}


</style>
</head>
<body>
<div class="flex_container">
<div class="inner">
<div class="content-inner">
<table class="table-border">
<tbody>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
<th>heading 4</th>
</tr>
<tr style="background:rgba(255, 255, 255, 0.3)">
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>

</div>
</div>
</div>
</body>
</html>

任何帮助将不胜感激。谢谢你

<html>
<head>

<style>

.flex_container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.inner {
height:1000px;
width: 900px;
background-color:#000;

background-size: cover;
color: white;
display: flex;
/* justify-content: center;
align-items: center;
*/
}

.table-border {
border-collapse: separate;
border-spacing: 0px;
table-layout: fixed;
color: white;
font-size: 15px;
display: inline-block;
}

.table-border tr th {
background-color: rgb(255,255,255,0.6);
border-radius: 2px;
padding-right: 35px;
padding-left: 35px;
padding-top: 10px;
padding-bottom: 10px;  
border: 5px solid black;
}
.content-inner {
margin-top: 250px;
margin-left: 50px;
}


</style>
</head>
<body>
<div class="flex_container">
<div class="inner">
<div class="content-inner">
<table class="table-border">
<tbody>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
<th>heading 4</th>
</tr>
<tr style="background:rgba(255, 255, 255, 0.3)">
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>

</div>
</div>
</div>
</body>
</html>

使用border-collapse: collapse;
在<th>元素中使用<thead>和<div>s
最后，在

body {
background-color: #000;
color: white;
}
.table-border {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: 15px;
}
.table-border thead th div {
background-color: rgb(255, 255, 255, 0.6);
border-radius: 2px;
padding: 0.8rem 1.4rem;
margin: 0.3rem;
}
.table-border tbody td {
background: rgba(255, 255, 255, 0.3);
}

<table class="table-border">
<thead>
<tr>
<th>
<div>Heading 1</div>
</th>
<th>
<div>Heading 2</div>
</th>
<th>
<div>Heading 3</div>
</th>
<th>
<div>Heading 4</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>

你不一定需要<table>，你可以使用常规div, CSS flex或Grid，以及aria-role="table">

相关内容

最新更新

热门标签：