直接の境界線半径の適用が制限されている場合、CSS を使用してテーブルの行に丸い角を適用するにはどうすればよいですか?

テーブルの行に境界線の半径を適用する

テーブルの行 () の外観をカスタマイズするときに、境界線の半径を適用する機能直接のアクセスを制限することができます。 CSS スタイルを使用した回避策は次のとおりです。

<code class="css">table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: solid 1px #000;
  border-style: none solid solid none;
  padding: 10px;
}

tr:first-child td:first-child {
  border-top-left-radius: 10px;
}
tr:first-child td:last-child {
  border-top-right-radius: 10px;
}

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

tr:first-child td {
  border-top-style: solid;
}
tr td:first-child {
  border-left-style: solid;
}

この解決策は、個々のテーブル データ セル () の境界線を設定して、行の周囲に目的の境界線を形成します。 border-collapse プロパティと border-spacing プロパティにより、セルが重ならずに分離されます。

<code class="html"><table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table></code>

この回避策を適用すると、表の行の角を丸くすることができ、視覚的な魅力を効果的に高めることができます。

以上が直接の境界線半径の適用が制限されている場合、CSS を使用してテーブルの行に丸い角を適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。