it-swarm-id.com

Bagaimana cara membuat tabel HTML dengan lebar yang sama dengan tag div yang mengandungnya?

Saya punya meja di dalam div. Saya ingin tabel menempati seluruh lebar tag div.

Di CSS, saya telah mengatur lebar tabel menjadi 100%. Sayangnya, ketika div memiliki margin di atasnya, tabel tersebut berakhir lebih luas daripada div yang ada di dalamnya.

Saya perlu mendukung IE6 dan IE7 (karena ini adalah aplikasi internal), walaupun saya jelas ingin solusi lintas-browser sepenuhnya jika memungkinkan!

Saya menggunakan DOCTYPE berikut ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Sunting : Sayangnya saya tidak dapat membuat hard-code lebar karena saya secara dinamis menghasilkan HTML dan itu termasuk bersarang divs secara rekursif satu sama lain (dengan margin kiri pada setiap div, ini menciptakan efek 'bersarang' yang bagus) ).

19
Chris Roberts

Tambahkan CSS di bawah ini ke <table> Anda:

table-layout: fixed;
width: 100%;
11
Sharad Biradar

Berikut ini berfungsi untuk saya di Firefox dan IE7 ... sebuah pedoman, meskipun adalah: jika Anda menetapkan lebar pada suatu elemen, jangan atur margin atau padding pada elemen yang sama. Ini berlaku terutama jika Anda sedang mencampur unit - katakanlah, mencampur persen dan piksel.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div style="width: 500px; background-color:#F33;">
      This is the outer div
      <div style="background-color: #FAA; padding: 10px; margin:10px;">
        This is the inner div
        <table cellpadding="0" cellspacing="0" style="width: 100%">
          <tr>
            <td style="border: 1px solid blue; background-color:#FEE;">Here is my td</td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

Lihat sini untuk contoh.

7
Nate

Lebar berdasarkan persentase relatif terhadap elemen induk pertama yang memiliki lebar yang ditentukan. Jika div Anda tidak memiliki lebar yang ditentukan maka lebar tabel tidak ada hubungannya dengan itu. Bisakah Anda memposting versi markup yang disederhanakan yang memperlihatkan seperti apa struktur DOM Anda? 

Dari sudut lain, jika div orangtua Anda TIDAK memiliki set lebar dan margin masih memengaruhi meja Anda, maka Anda mungkin dalam mode quirks. Anda telah menentukan DOCTYPE Anda, tetapi perlu diketahui bahwa elemen DOCTYPE HARUS menjadi baris pertama dalam file. Hal lain yang perlu diperhatikan ketika berhadapan dengan IE6, secara default, jika konten Anda lebih luas dari orang tua Anda, orang tua akan ditarik untuk mengakomodasi, Anda dapat menghentikan ini dengan menambahkan overflow: hidden ke css Anda untuk elemen induk tetapi dalam prosesnya Anda mungkin mengaburkan beberapa konten elemen anak. 

4
Eric DeLabar

Tidak begitu yakin apa masalahnya di sini - ini berfungsi dengan baik di IE6/7 dan FF3. Mengatur lebar elemen .container DIV mengatur lebar tabel. Menambahkan margin ke .container div tidak memengaruhi tabel. Mungkin ada hal lain di markup/CSS Anda yang memengaruhi tata letak?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <title>Boxes and Tables</title>
        <style type="text/css">

        div.container {
            background-color: yellow;
            border: 1px solid #000;
            width: 500px;
            margin: 5px auto;
        }

        table.contained {
            width: 100%;
            border-collapse: collapse;
        }

        table td {
            border: 2px solid #999;
        }

        </style>
    </head>

    <body>
        <div class="container">
            <table class="contained">
                <thead>
                    <tr><th>Column1</th><th>Column2</th><th>Column3</th></tr>
                </thead>
                <tbody>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                    <tr><td>Value</td><td>Value</td><td>Value</td></tr>
                </tbody>
            </table>
        </div>
    </body>
</html>
3
David Heggie

Saya menemukan inti masalahnya di sini. Itu ada hubungannya dengan border-collapse. Saya punya masalah yang sama untuk sementara waktu sekarang. Karena tabel sering memiliki batas tipis masalahnya tidak jelas bagi kebanyakan orang. Jika Anda meletakkan tabel reguler dengan lebar yang diatur ke 100% di dalam div, seperti yang dimiliki Nate, Anda akan baik-baik saja.

Namun, jika Anda menentukan border-collapse:collapse pada tabel, tabel akan keluar dari div. Ini tidak jelas bagi kebanyakan orang karena hanya dapat pecah oleh satu piksel, atau tergantung pada konteksnya dan agen pengguna, mungkin tidak sama sekali.

Untuk memperjelas apa yang sedang terjadi, coba ini: Letakkan contoh Nate di sebelah contoh David Heggie dalam file html.

Ini akan terlihat seperti keduanya berfungsi dengan baik. Tapi sekarang, ubah style inate Nate TD menjadi border: 40px solid blue. Ubah gaya td tabel David menjadi border: 40px solid #999;. Pada titik ini, meja David keluar dari div sebesar 50% dari perbatasannya di setiap sisi. Nate masih berfungsi. Letakkan gaya border-collapse:collapse di atas meja Nate dan istirahatnya juga sekarang.

Ini adalah border-collapse yang menyebabkannya!

2
Chris

Dalam kasus di mana Anda secara otomatis membuat kode yang mungkin memiliki margin di atasnya, menambahkan elemen <div> sederhana tanpa gaya yang membungkus tabel Anda mungkin melakukan trik.

1
Nate

Saya selalu menggunakan <table width="100%">

1
Joe Morgan

Kode berikut berfungsi pada IE6/8, Chrome, Firefox, Safari:

<style type="text/css">
    div.container 
    {
        width: 500px;
        padding: 10px;
        margin: 10px;
        border: 1px solid red;
    }
    table.contained 
    {
        width: 100%;
        border: 1px solid blue;
    }
</style>

<div class="container">
    <table class="contained">
    <tr>
        <td>Hello</td><td>World</td>
    </tr>
    </table>
</div>

Coba salin dan tempel dan buat di atasnya (cukup pindahkan bagian style ke header atau ke file .css terpisah), mungkin cara Anda menggunakan menempatkan inline CSS (menggunakan tag gaya) ada hubungannya dengan masalah, atau itu adalah beberapa CSS lain yang mengelilingi blok tabel div? Mengambang juga bisa menimbulkan masalah.

P.S. Saya menetapkan batas merah dan biru untuk melihat ke mana area meluas untuk pemeriksaan yang lebih visual.

0
Nestor

Mungkin artikel ekstensif ini tentang Internet Explorer dan model kotak CSS akan membantu?

0
Christian Davén

Itulah masalah besar dengan cara CSS memperlakukan properti lebar dan alasan Microsoft menerapkan model kotak berbeda pada awalnya. Microsoft hilang, dan sekarang lebar atau margin/bantalan/batas untuk elemen. 

Situasi dapat berubah menjadi lebih baik di CSS3 dengan properti ukuran kotak

0
buti-oxa

overflow: otomatis; pada div terluar dapat membantu jika Anda melihat hal-hal aneh - seperti div terluar lebih kecil dari yang Anda inginkan atau tidak mengambil seluruh ukuran div di dalamnya.

0
William

coba ini:

div {
 padding: 0px;
}

table {
    width: 100%;
    margin: 0px;
}

dengan mengatur bantalan div ke nol, Anda akan menghapus ruang antara batas div dan kontennya. dengan mengatur lebar tabel ke 100% dan margin ke nol, Anda akan menghapus ruang antara batas-batas tabel dan wadahnya.

0
farzad

Kebetulan, apakah ada alasan bagus bagi Anda untuk tidak menggunakan DOCTYPE ketat? ketat harus selalu menjadi standar. transisi hanya ditujukan untuk kode lawas.

0
Konrad Rudolph