Rumah > Artikel > hujung hadapan web > Mengapakah `min-width` dan `max-width` tidak berfungsi pada sel jadual dan bagaimanakah saya mengawal saiznya?

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

Mary-Kate Olsenasal: 2024-10-25 07:07:02459semak imbas

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>

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!

css define for using Property this column table td issue

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bolehkah saya Memaksa Laman Web Bootstrap untuk Memaparkan Versi Desktop pada Peranti Mudah Alih?Artikel seterusnya：Bolehkah saya Memaksa Laman Web Bootstrap untuk Memaparkan Versi Desktop pada Peranti Mudah Alih?

Artikel berkaitan

Lihat lagi