在不更改标记的情况下使用 CSS 向语义 HTML table 添加边框和边距

Question

我已经在 fiddle 上模拟了我的问题。

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

您可以在 styled-head

内的 a 属性中添加 border-bottom CSS

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

在不更改标记的情况下使用 CSS 向语义 HTML table 添加边框和边距

Adding borders and margins to a semantic HTML table using CSS without changing markup

html

css

html-table

styled-components