Bolehkah Anda Kawal Penjajaran Teks dalam Colgroup Jadual HTML?

Penjajaran Teks dalam HTML Table Colgroups

Untuk mengekalkan konsistensi dalam elemen jadual, colgroup kerap digunakan untuk menggayakan semua sel secara seragam dalam lajur yang ditentukan. Walaupun kumpulan kol mengawal aspek seperti warna latar belakang dengan berkesan, penjajaran teks kekal tidak boleh diakses melalui kaedah ini.

Mari kita pertimbangkan contoh berikut:

<code class="html"><table id="myTable" cellspacing="5">
    <colgroup id="names"></colgroup>
    <colgroup id="col20" class="datacol"></colgroup>
    <colgroup id="col19" class="datacol"></colgroup>
    <colgroup id="col18" class="datacol"></colgroup>

    <thead>
        <th> </th>
        <th>20</th>
        <th>19</th>
        <th>18</th>
    </thead>
    <tbody>
        <tr>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
    </tbody>
</table></code>

<code class="css">#names {
    width: 200px;
}

#myTable .datacol {
    text-align: center;
    background-color: red;
}</code>

Seperti yang ditunjukkan dalam kod CSS, memberikan " text-align: center" ke kelas "datacol" tidak menghasilkan hasil yang diharapkan. Ini kerana lajur mempunyai kebolehgunaan sifat CSS yang terhad, tidak termasuk penjajaran teks.

Untuk membetulkan isu ini, peraturan CSS berikut boleh dilaksanakan:

<code class="css">#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }</code>

Pelarasan ini menjajarkan semua sel jadual secara berpusat, dengan pengecualian lajur pertama, yang kekal dijajar kiri. Terutama, penyelesaian ini tidak serasi dengan IE6, di mana penjajaran teks tersilap digunakan pada lajur walaupun ia tidak serasi.

Selain itu, kod HTML yang disediakan mengandungi struktur elemen yang tidak sah. bahagian tiada tag.

Atas ialah kandungan terperinci Bolehkah Anda Kawal Penjajaran Teks dalam Colgroup Jadual HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!