html - 带有自定义边框的 CSS 表格

Question

我坚持使用简单的表格设计，因为我来自后端我需要这样的表格

我现在拥有的

table {
	border-collapse: collapse; 
    width: 100%;
}
tr { 
	border: none; 
}
.first{
    width: 40%;
    font-family: Quasimoda;
    font-size: 0.75em;
    color: #1D1D1E;
}
.middle{
    width: 60%;
    font-family: Quasimoda;
    font-size: 0.75em;
    color: #1D1D1E;
}
.last{
    width: 40%;
    font-family: Quasimoda;
    font-size: 0.75em;
    color: #1D1D1E;
}
td {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 10px;
}

<table>
  
  <tr>
    <td class="University">January</td>
    <td class="middle ">the progress bar will be placed here </td>
    <td class="last">870</td>
  </tr>
  <tr>
    <td class="first">January</td>
    <td class="middle ">the progress bar will be placed here </td>
    <td class="last">560</td>
  </tr>
</table>

请帮忙。我尝试了多个 html 表格属性，但都徒劳无功。

标签： htmlcss

Answer 1

设置thead tr元素下边框，以及元素的右边框.first：

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
  border-bottom: 1px solid #ddd;
}

td {
  padding: 10px;
  font-family: Quasimoda;
  font-size: 0.75em;
  color: #1D1D1E;
}

.first {
  border-right: 1px solid #ddd;
}

.middle {
  width: 100%;
}

<table>
  <thead>
    <tr>
      <th colspan="3">Unique values:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="first">January</td>
      <td class="middle ">the progress bar will be placed here </td>
      <td class="last">870</td>
    </tr>
    <tr>
      <td class="first">January</td>
      <td class="middle ">the progress bar will be placed here </td>
      <td class="last">560</td>
    </tr>
  </tbody>
</table>