Bagaimana Saya Boleh Mencipta Sudut Meja Bulat Menggunakan CSS Sahaja?

Sudut Meja Bulat Menggunakan CSS Sahaja

Dalam bidang reka bentuk web, mencapai antara muka yang menarik secara visual dan mesra pengguna adalah yang terpenting. Satu cabaran yang dihadapi oleh pereka bentuk ialah menambah sudut bulat pada meja sambil mengekalkan reka letak yang konsisten dan menyenangkan dari segi estetika. Artikel ini meneroka penyelesaian untuk cabaran ini menggunakan CSS tulen, tanpa sebarang imej tambahan atau JavaScript.

Cabarannya

Matlamatnya adalah untuk mencipta jadual HTML biasa dengan sudut bulat, serupa dengan ilustrasi di bawah:

[Imej meja dengan bucu bulat]

Awal Percubaan

Pendekatan awal menggunakan -moz-border-radius gagal memberikan sudut bulat sambil mengekalkan sempadan sel. Untuk menangani perkara ini, kami menggunakan teknik berikut:

Teknik Sempadan Berasingan

Dengan menentukan sempadan berasingan untuk jadual dan selnya, kita boleh mencapai kesan yang diingini. Berikut ialah kod CSS untuk pendekatan ini:

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

Contoh

Menggunakan CSS di atas pada jadual HTML, kami memperoleh hasil berikut:

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

Kesimpulan

Teknik ini berkesan mencapai sudut bulat untuk jadual HTML menggunakan CSS tulen, menghapuskan keperluan untuk imej luaran atau JavaScript. Ia mengekalkan sempadan sel dan menyediakan reka letak yang konsisten dan menarik secara visual.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Mencipta Sudut Meja Bulat Menggunakan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!