表格左邊框太粗，背景顏色未填充在邊框半徑內

我有一張沒有按我預期設計的桌子。

左側邊框太厚，右側的背景顏色不太適合邊框半徑：

我不確定為什么會這樣，有什么想法嗎？我已經將我的代碼包含在 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>

uj5u.com熱心網友回復：

在我的解決方案中，一切看起來都是正確的。

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>

uj5u.com熱心網友回復：

因為這條線 - ，右邊的邊框比左邊的要細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>

uj5u.com熱心網友回復：

您在代碼中使用border了兩次thtd

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>

標籤：html css

上一篇：如何在Flutter中將內容容器居中，就像CSS中的“最大寬度”容器一樣？

下一篇：我的回應式網站在移動設備上的外觀與在瘦瀏覽器上的不同