Table 左边框太粗，背景颜色未填充到边框半径内

Question

我有一个 table 的样式与我预期的不一样。

左侧边框太粗，右侧的背景颜色与边框半径不太吻合：

我不确定这是为什么，有什么想法吗？我已将我的代码包含在 MWE 中。

table {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    width: 100%;
    background-color: #ffffff;
    border-collapse: collapse;
    border-width: 2px;
    border-color: #dedede;
    border-style: solid;
    color: #000000;
    border-radius: 10px;
    border-collapse: separate !important;
    border-spacing: 0;
  }

  table td, table th {
    border-right: solid 1px #dedede;
    border-left: solid 1px #dedede;
    padding: 10px;
  }

  table thead {
    font-size: 1.6em;
  }

  table th:last-child {
    border-right: 0px;
    border-top-right-radius: 10px;
    background-color: #edf2f4;
  }

  table td:last-child {
    border-right: 0px;
    background-color: #edf2f4;
  }

  .last-td {
    border-right: 0px;
    border-bottom-right-radius: 10px;
    background-color: #edf2f4;
  }

<table>
  <thead>
    <tr>
      <th> alpha </th>
      <th> beta </th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td> lorem </td>
      <td> lorem </td>
    </tr>
  </tbody>
</table>

Answer 1

由于这条线，右边的边框比左边的边框细 - border-right: 0px;。最后一个 <td> 和 <tr> 的右边框有 0 px，而第一个的左边有 1 px，这导致边框变粗了。下面的代码将解决这个问题。

table {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  width: 100%;
  background-color: #ffffff;
  border-collapse: collapse;
  border-width: 2px;
  border-color: #dedede;
  border-style: solid;
  color: #000000;
  border-radius: 10px;
  border-collapse: separate !important;
  border-spacing: 0;
}

table td,
table th {
  border-right: solid 1px #dedede;
  border-left: solid 1px #dedede;
  padding: 10px;
}

table thead {
  font-size: 1.6em;
}

table th:last-child {
  border-top-right-radius: 10px;
  background-color: #edf2f4;
}

table td:last-child {
  background-color: #edf2f4;
}

.last-td {
  border-right: 0px;
  border-bottom-right-radius: 10px;
  background-color: #edf2f4;
}

<table>
  <thead>
    <tr>
      <th> alpha </th>
      <th> beta </th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td> lorem </td>
      <td> lorem </td>
    </tr>
  </tbody>
</table>

Answer 2

您在 th 和 td

的代码中使用了两次 border

table {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    width: 100%;
    background-color: #ffffff;
    border-collapse: collapse;
    border-width: 2px;
    border-color: #dedede;
    border-style: solid;
    color: #000000;
    border-radius: 10px;
    border-collapse: separate !important;
    border-spacing: 0;
  }

  
  table td, table th {
    border-right: solid 1px #dedede;
    padding: 10px;
  }

  table thead {
    font-size: 1.6em;
  }

  table th:last-child {
    border-right: 0px;
    border-top-right-radius: 8px;
    background-color: #edf2f4;
  }

  table td:last-child {
    border-right: 0px;
    border-bottom-right-radius: 8px;
    background-color: #edf2f4;
  }

  .last-td {
    border-right: 0px;
    border-bottom-right-radius: 10px;
    background-color: #edf2f4;
  }

<table>
  <thead>
    <tr>
      <th> alpha </th>
      <th> beta </th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td> lorem </td>
      <td> lorem </td>
    </tr>
  </tbody>
</table>

Answer 3

在我的解决方案中，一切看起来都是正确的。

table {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  width: 100%;
  background-color: #ffffff;
  border-collapse: separate;
  border-spacing: 0;
}
table tr th,
table tr td {
  border-right: 2px solid #dedede;
  border-bottom: 2px solid #dedede;
  padding: 10px;
}

table tr th:first-child,
table tr td:first-child {
  border-left: 2px solid #dedede;
}
table tr th:first-child,
table tr td:first-child {
  border-left: 2px solid #dedede;
}
table tr th {
  background: #eee;
  text-align: left;
  border-top: solid 2px #dedede;
}

table td:last-child {
  background-color: #edf2f4;
}

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 10px;
}

/* top-right border-radius */
table tr:first-child th:last-child {
  border-top-right-radius: 10px;
}

/* bottom-left border-radius */
table tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

<div>
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>

Table 左边框太粗，背景颜色未填充到边框半径内

Table left border too thick, and background colour not filling within border radius

html

css