it-swarm-tr.com

Bir HTML tablosunu, içerdiği div etiketiyle aynı genişlikte nasıl yaparım?

Bir div içinde bir masam var. Tablonun div etiketinin tüm genişliğini doldurmasını istiyorum.

CSS'de, tablonun genişliğini% 100 olarak ayarladım. Ne yazık ki, div üzerinde bir miktar marj olduğunda, masa içinde olduğu div'den daha geniş bir alana sahip olur.

IE6 ve IE7'yi desteklemem gerekiyor (dahili bir uygulama olduğu için), ancak mümkünse tam bir tarayıcı çözümü istiyorum.

Aşağıdaki DOCTYPE kullanıyorum ...

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

Edit : Ne yazık ki, HTML'yi dinamik olarak oluşturduğum için genişliğini kodlayamıyorum ve divleri tekrarlı bir şekilde içlerine yerleştirmeyi de içeriyor (her div'de sol kenar boşluğu ile bu, Güzel bir 'yuvalanmış' etki yaratıyor) ).

19
Chris Roberts

Aşağıdaki CSS'yi <table>'nuza ekleyin:

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

Aşağıdakiler Firefox ve IE7'de benim için çalışıyor ... bir kılavuz olsa da: eğer bir elemanın genişliğini ayarlarsanız, aynı eleman üzerinde kenar boşluğu veya dolgu ayarlamayın. Bu doğrudur özellikle eğer birimleri karıştırıyorsanız - örneğin, karışım yüzdelerini ve pikselleri.

<!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>

Örnek için here bölümüne bakınız.

7
Nate

Yüzde temelli genişlikler, belirtilen genişliğe sahip ilk ana öğeye göredir. Div'iniz belirtilen genişliğe sahip değilse, tablonun genişliğinin bununla hiçbir ilgisi yoktur. DOM ağacınızın nasıl göründüğünü gösteren biçimlendirmenin basitleştirilmiş bir sürümünü gönderebilir misiniz? 

Başka bir açıdan, eğer ebeveyniniz div DOES'in genişliğine ayarlanmışsa ve kenar boşluğu hala masanızı etkiliyorsa, muhtemelen tuhaflıklar modundasınız demektir. DOCTYPE'nuzu belirttiniz, ancak DOCTYPE öğesinin dosyadaki ilk satır olması gerektiğini unutmayın. IE6 ile uğraşırken dikkat etmeniz gereken bir şey var; varsayılan olarak, içeriğiniz ebeveyninizden daha genişse, ebeveynin barındırması için esnetilir, bunu ana öğeye göre css'nıza overflow: hidden ekleyerek ancak gizleyebilirsiniz. alt öğe içeriğinin bir kısmı. 

4
Eric DeLabar

Sorunun burada ne olduğundan emin değilsiniz - bu IE6/7 ve FF3’te iyi sonuç veriyor. .Container DIV elemanının genişliğini ayarlamak tablonun genişliğini ayarlar. .Container div öğesine boşluk eklemek tabloyu etkilemez. Belki de işaretlemeniz/CSS’nizde düzeni etkileyen başka bir şey var?

<!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

Sorunun kalbini burada çözdüm. border-collapse ile ilgili olmalı. Bir süredir aynı sorunu yaşadım. Masaların çoğu zaman ince sınırları olduğu için sorun çoğu insan için açık değildir. Nate gibi bir div içine genişliği% 100 olarak ayarlanmış normal bir tablo koyarsanız, iyi olacak.

Ancak, eğer masada border-collapse:collapse belirlerseniz, tablo div'den ayrılır. Bu, çoğu insan için açık değildir, çünkü yalnızca bir piksele veya içerdiği içeriğe ve kullanıcı aracısına bağlı olarak, belki de hiç olmayabilir.

Neler olduğunu netleştirmek için şunu deneyin: Nate'in örneğini David Heggie'nin örneğinin yanına bir html dosyasına koyun.

Her ikisi de iyi iş gibi görünecek. Fakat şimdi, Nate'in satır içi TD stilini border: 40px solid blue olarak değiştirin. David'in td stilini border: 40px solid #999; olarak değiştirin. Bu noktada, David'in masası her iki taraftaki sınırının% 50'sini divden ayırır. Nate hala çalışıyor. Nate'in masasına bir border-collapse:collapse stili koyun ve şimdi de kırıldı.

Buna sebep olan border-collapse!

2
Chris

Otomatik olarak üzerinde kenar boşlukları olabilecek bir kod oluşturduğunuzda, tablonuzu saran basit, stilsiz bir <div> öğesi eklemek hile yapabilir.

1
Nate

Her zaman <table width="100%"> kullandım

1
Joe Morgan

Aşağıdaki kod IE6/8, Chrome, Firefox, Safari’de çalışır:

<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>

Kopyalayıp yapıştırmayı ve üzerine oluşturmayı deneyin (yalnızca stil bölümünü başlığa veya ayrı bir .css dosyasına taşıyın), belki de CSS satır içi (stil etiketini kullanarak) kullanarak yaptığınız sorunun sorunu ile ilgisi vardır, veya div masa bloklarını çevreleyen başka bir CSS mi? Yüzer de sıkıntı verebilir.

Not; Daha görsel kontrol için alanların nereye genişlediğini görmek için kırmızı ve mavi sınırlar belirledim.

0
Nestor
0
Christian Davén

Bu, CSS'nin width özelliğini nasıl ele aldığına ve Microsoft'un ilk önce kutu modelini farklı bir şekilde uygulamasına neden olan büyük sorun. Microsoft kaybetti ve şimdi bir öğe için genişlik veya kenar boşluğu/dolgusu/kenarlığı. 

Durum, kutu boyutlandırma özelliği ile CSS3'te daha iyi bir şekilde değişebilir

0
buti-oxa

taşma: otomatik; En dıştaki div, eğer garip şeyler görüyorsanız, en dıştaki div'in istediğinizden daha küçük olması veya içindeki divlerin tüm boyutlarını kaplamaması gibi yardımcı olabilir.

0
William

bunu dene:

div {
 padding: 0px;
}

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

div'in dolgusunu sıfıra ayarlayarak, div'in sınırları ile içeriği arasındaki boşluğu kaldıracaksınız. Tablonun genişliğini% 100 olarak ayarladıysanız ve bu değer sıfıra sıfırsa, tablonun sınırları ile kabı arasındaki boşluğu kaldıracaksınız.

0
farzad

Bu arada, sıkı bir doktip kullanmamak için iyi bir neden var mı? Sıkı her zaman varsayılan olmalıdır. geçiş sadece eski kod için tasarlanmıştır.

0
Konrad Rudolph