Mengapakah `min-width` dan `max-width` tidak berfungsi pada sel jadual dan bagaimanakah saya mengawal saiznya?-tutorial css-php.cn

Mengapakah `min-width` dan `max-width` tidak berfungsi pada sel jadual dan bagaimanakah saya mengawal saiznya?

Mary-Kate Olsen

Lepaskan： 2024-10-25 07:07:02

asal

550 orang telah melayarinya

Why does `min-width` and `max-width` not work on table cells and how do I control their size?

Atribut Min-lebar dan Max-height untuk Jadual

Apabila cuba menentukan lebar minimum dan maksimum untuk elemen jadual menggunakan 'min- width' dan 'max-width', ia mungkin tidak mudah. Artikel ini menangani isu biasa di mana sifat ini kelihatan diabaikan, menyebabkan tingkah laku yang tidak dijangka.

Masalah:

Mentakrifkan 'lebar min' dan 'lebar maksimum' pada elemen 'td' atau dalam elemen 'div' yang bersarang di dalam elemen 'td' mengakibatkan tingkah laku bercanggah. Kandungan mungkin mematuhi dimensi yang ditentukan, tetapi saiz keseluruhan jadual kekal tidak berubah, meninggalkan ruang kosong yang berlebihan.

Penyelesaian:

Spesifikasi CSS menunjukkan bahawa 'lebar min ' dan sifat 'max-width' tidak ditakrifkan untuk sel jadual (iaitu, elemen 'td'). Sebaliknya, sifat 'width' harus digunakan untuk menguatkuasakan lebar minimum.

Untuk memastikan lebar sel jadual dikuatkuasakan, sifat 'table-layout' harus ditetapkan kepada "fixed". Ini mengarahkan penyemak imbas untuk mengira lebar lajur berdasarkan nilai 'lebar' yang ditentukan, menghapuskan isu ruang kosong.

Contoh Kod:

Kod diubah suai berikut menyelesaikan masalah dengan menggunakan sifat 'lebar' dan menetapkan 'tata letak jadual' kepada "tetap":

<code class="html"><html>
<head>
    <style type="text/css">
        td {
            border: 1px solid black;
        }

        html,body,.fullheight {
            height: 100%;
            width: 100%;
        }
        .minfield {
            width: 10px;
            border: 1px solid red;
            overflow: hidden;
        }
        table {
            table-layout: fixed;
        }
    </style>    
</head>

<body>
    <table class="fullheight">
        <tr>
            <td class="minfield">
                <div class="minfield">
                    <p>hallo</p>
                </div>
            </td>
            <td><p>welt</p></td>
        </tr>
    </table>
</body>
</html></code>

Salin selepas log masuk

Perhatikan bahawa penetapan 'susun atur jadual' kepada "tetap" mungkin juga mempengaruhi lebar lajur yang tidak ditakrifkan secara jelas . Untuk mengelakkan akibat yang tidak diingini, pastikan semua lajur mempunyai lebarnya yang ditentukan.

Atas ialah kandungan terperinci Mengapakah `min-width` dan `max-width` tidak berfungsi pada sel jadual dan bagaimanakah saya mengawal saiznya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!