在不改变标记的情况下使用CSS为语义HTML表添加边框和页边距

Question

我在小提琴上模拟了我的问题。

我的表当前有所有正确的部分，但我想添加一个"border"到styled-head的底部，使其与行明显区分，然后加上顶部&行的底线(取决于它们是否需要，例如，第一行不应该需要顶部边框，因为头部应该总是有一个)。我试过添加边界，但它们没有出现。我不想在标记中添加任何新的HTML元素，是否有可能仅用CSS实现这些更改?

fiddle: https://jsfiddle.net/6wgv2ohy/19/(我刚刚创建了这个，以快速重新创建我的问题)

.styled-table {
display: table;
width: 100%;
background-color: transparent;
border-collapse: separate;
border-spacing: 0px 8px;
max-width: 1248px;
}
.styled-head {
display: table-header-group;
margin-bottom: 8px;
border: 1px solid black;
}
.styled-link {
display: table-cell;

}
.styled-rows {
display: table-row-group;
border-collapse: separate;
}
.styled-row {
border-top: 4px solid black;
display: table-row;
height: 56px;
width: 100%;
margin-top: 8px;
}
.styled-cell {
display: table-cell;
font-size: 14px;
letter-spacing: 0px;
line-height: 20px;
font-weight: bold;
text-decoration: none;
color: #27282a;
}

<div class="styled-table">
<div class="styled-head">
<a class="styled-link">Ford</a>
<a class="styled-link">Volkswagen</a>
<a class="styled-link">Volvo</a>
</div>

<div class="styled-rows">

<div class="styled-row">
<div class="styled-cell">
<span>Fiesta</span>
</div>
<div class="styled-cell">
<span>Golf</span>
</div>
<div class="styled-cell">
<span>CX30</span>
</div>
</div>

<div class="styled-row">
<div class="styled-cell">
<span>Galaxy</span>
</div>
<div class="styled-cell">
<span>Polo</span>
</div>
<div class="styled-cell">
<span>CX50</span>
</div>
</div>
</div>
</div>

Answer 1

可以将border-bottomCSS添加到astyled-head内部属性

.styled-table {
display: table;
width: 100%;
background-color: transparent;
border-collapse: separate;
border-spacing: 0px 8px;
max-width: 1248px;
}
.styled-head {
display: table-header-group;
margin-bottom: 8px;
border-bottom: 1px solid black;
}
.styled-head a {
border-bottom: 1px solid black;
}

.styled-link {
display: table-cell;

}
.styled-rows {
display: table-row-group;
border-collapse: separate;
}
.styled-row {
border-top: 4px solid black;
display: table-row;
height: 56px;
width: 100%;
margin-top: 8px;
}
.styled-cell {
display: table-cell;
font-size: 14px;
letter-spacing: 0px;
line-height: 20px;
font-weight: bold;
text-decoration: none;
color: #27282a;
}

<div class="styled-table">
<div class="styled-head">
<a class="styled-link">Ford</a>
<a class="styled-link">Volkswagen</a>
<a class="styled-link">Volvo</a>
</div>
<div class="styled-rows">
<div class="styled-row">
<div class="styled-cell">
<span>Fiesta</span>
</div>
<div class="styled-cell">
<span>Golf</span>
</div>
<div class="styled-cell">
<span>CX30</span>
</div>
</div>
<div class="styled-row">
<div class="styled-cell">
<span>Galaxy</span>
</div>
<div class="styled-cell">
<span>Polo</span>
</div>
<div class="styled-cell">
<span>CX50</span>
</div>
</div>
</div>
</div>

Answer 2

试试这个。添加border-bottom: 1px solid black到.styled-link.

.styled-table {
display: table;
width: 100%;
background-color: transparent;
border-collapse: seperate;
border-spacing: 0px 8px;
max-width: 1248px;
}
.styled-head {
display: table-header-group;
margin-bottom: 8px;
border: 1px solid black;
border-collapse: collapse;
}
.styled-link {
display: table-cell;
border-bottom: 1px solid black;
}
.styled-rows {
display: table-row-group;
border-collapse: separate;
}
.styled-row {
border-top: 4px solid black;
display: table-row;
height: 56px;
width: 100%;
margin-top: 8px;
}
.styled-cell {
display: table-cell;
font-size: 14px;
letter-spacing: 0px;
line-height: 20px;
font-weight: bold;
text-decoration: none;
color: #27282a;
}

<div class="styled-table">
<div class="styled-head">
<a class="styled-link">Ford</a>
<a class="styled-link">Volkswagen</a>
<a class="styled-link">Volvo</a>
</div>
<div class="styled-rows">
<div class="styled-row">
<div class="styled-cell">
<span>Fiesta</span>
</div>
<div class="styled-cell">
<span>Golf</span>
</div>
<div class="styled-cell">
<span>CX30</span>
</div>
</div>
<div class="styled-row">
<div class="styled-cell">
<span>Galaxy</span>
</div>
<div class="styled-cell">
<span>Polo</span>
</div>
<div class="styled-cell">
<span>CX50</span>
</div>
</div>
</div>
</div>

Answer 3

您不能为thead标签添加样式，因此，使用display属性，div就像thead一样。
您可以实现结果，将样式添加到<div class="styled-head">

的内容中

.styled-table {
display: table;
width: 100%;
background-color: transparent;
border-collapse: separate;
border-spacing: 0px 8px;
max-width: 1248px;
}
.styled-head {
display: table-header-group;
margin-bottom: 20px;
border: 1px solid black; // <==== You can remove this
}
.styled-link {
display: table-cell;
border-bottom: 1px solid black; // Add this

}
.styled-rows {
display: table-row-group;
border-collapse: separate;
}
.styled-row {
border-top: 4px solid black;
display: table-row;
height: 56px;
width: 100%;
margin-top: 8px;
}
.styled-cell {
display: table-cell;
font-size: 14px;
letter-spacing: 0px;
line-height: 20px;
font-weight: bold;
text-decoration: none;
color: #27282a;
}

<div class="styled-table">
<div class="styled-head">
<a class="styled-link">Ford</a>
<a class="styled-link">Volkswagen</a>
<a class="styled-link">Volvo</a>
</div>
<div class="styled-rows">
<div class="styled-row">
<div class="styled-cell">
<span>Fiesta</span>
</div>
<div class="styled-cell">
<span>Golf</span>
</div>
<div class="styled-cell">
<span>CX30</span>
</div>
</div>
<div class="styled-row">
<div class="styled-cell">
<span>Galaxy</span>
</div>
<div class="styled-cell">
<span>Polo</span>
</div>
<div class="styled-cell">
<span>CX50</span>
</div>
</div>
</div>
</div>