具有自定义边框的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表属性，但都白费了。

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>

Answer 2

实际上，您的图片不清楚。 我不清楚您实际上想在哪里接壤。 但是，我尝试这样做，运行代码片段并进行查看，然后让我知道这是否对您有用。

.colspan2border
{
  border-collapse: collapse;
  border-bottom: 1px solid red;
}

.rightBorder
{
  border-collapse: collapse;
  border-right: 1px solid red;
}
.pr-left1
{
  padding-left: 1rem;
}
table 
{
  border-collapse: collapse;
}
tr 
{
  border: none;
}

<table>
  <tr colspan="2" class='colspan2border'><td>Unique values:</td></tr>
  <tr>
    <td class="rightBorder pr-left1">University</td>
    <td>870</td>
  </tr>
  <tr>
    <td class="rightBorder pr-left1">Custom</td>
    <td>560</td>
  </tr>
</table>