我的背景顏色比表格行中的邊框更遠，我該如何解決？-有解無憂

它發生在我的行的背景顏色不尊重表格設定的邊框半徑的底角，因此背景從表格中流出，我無法修復它。我嘗試使用最后一行的邊框，但它沒有讓我修改邊框半徑，所以我什么也做不了。

HTML 只是一個普通的表格。

我的背景顏色比表格行中的邊框更遠，我該如何解決？

  <body>
    <table>
      <thead>
        <tr>
          <th>Time</th>
          <th>Monday</th>
          <th>Tuesday</th>
          <th>Wednesday</th>
          <th>Thursday</th>
          <th>Friday</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>13:00</td>
          <td>Pizza</td>
          <td>Pasta</td>
          <td>Chocolate</td>
          <td>Banana</td>
          <td>Soup</td>
        </tr>
        <tr>
          <td>13:00</td>
          <td>Pizza</td>
          <td>Pasta</td>
          <td>Chocolate</td>
          <td>Banana</td>
          <td>Soup</td>
        </tr>
        <tr>
          <td>18:00</td>
          <td>Chocolate</td>
          <td>Pasta</td>
          <td>Pizza</td>
          <td>Banana</td>
          <td>Soup</td>
        </tr>
      </tbody>
    </table>
  </body>

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
table {
  border-collapse: collapse;
  border: solid transparent 2px;
  border-radius: 12px;
  background-color: rgb(166, 89, 89);
  color: rgb(248, 215, 215);
}
table thead tr th {
  text-align: left;
  padding: 5px;
  font-size: 1rem;
  color: rgb(240, 240, 240);
}
table tbody tr td {
  font-size: 0.9rem;
  padding: 5px;
  text-align: left;
}
table tbody tr:last-child {
  background-color: rgba(0, 0, 255, 0.405);
}

uj5u.com熱心網友回復：

當您應用時border-radius，孩子仍然會“溢位”超過半徑，只有當孩子有背景顏色時才會注意到。
您可以通過overflow:hidden對具有半徑的元素應用規則來解決它。

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

table {
  border-collapse: collapse;
  border: solid transparent 2px;
  border-radius: 12px;
  background-color: rgb(166, 89, 89);
  color: rgb(248, 215, 215);
    /*you need to hide overflows for the border-radius items*/
  overflow: hidden;
}

table thead tr th {
  text-align: left;
  padding: 5px;
  font-size: 1rem;
  color: rgb(240, 240, 240);
}

table tbody tr td {
  font-size: 0.9rem;
  padding: 5px;
  text-align: left;
}

table tbody tr:last-child {
  background-color: rgba(0, 0, 255, 0.405);
}

<table>
  <thead>
    <tr>
      <th>
        head
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell</td>
    </tr>
  </tbody>
</table>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/526141.html

標籤：htmlcss

上一篇：避免最后一項溢位內容

下一篇：如何將我的搜索框放在右上角？