使用 CSS 向语义 HTML 表格添加边框和边距而不更改标记

Question

我用小提琴模拟了我的问题。

我的表当前有所有正确的部分，但我试图在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

您不能为theadtag 添加样式，因此，使用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>

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

您可以将border-bottom CSS 添加到styled-head 内的以下a 属性中

.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>