it-swarm-eu.dev

Jak nastavím tabulku HTML na stejnou šířku jako její tag div?

Mám stůl uvnitř div. Chci, aby tabulka zabírala celou šířku tagu div.

V CSS jsem nastavil šířku tabulky na 100%. Bohužel, když div má nějaké rozpětí na to, tabulka skončí širší než div je v.

Musím podporovat IE6 a IE7 (protože se jedná o interní aplikaci), i když bych to samozřejmě měl jako řešení s plně prohlížečem, pokud je to možné!

Používám následující DOCTYPE ...

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

Edit : Bohužel nemohu tvrdý kód šířku, jak jsem dynamicky generování HTML a zahrnuje vnoření divs rekurzivně uvnitř sebe (s levým okrajem na každém div, to vytváří Nice 'vnořený efekt' ).

19
Chris Roberts

Přidejte níže uvedený soubor CSS do souboru <table>:

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

Následující funkce pro mě ve Firefoxu a IE7 ... funguje, i když je: pokud nastavíte na elementu šířku, nenastavujte okraj nebo výplň na stejný prvek. Toto platí pravdivě zvláště jestliže jste míchací jednotky - řekněme, směšování procent a pixelů.

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

Příklad viz zde .

7
Nate

Nejste si jisti, jaký je problém - funguje to dobře v IE6/7 a FF3. Nastavení šířky prvku .container DIV nastavuje šířku tabulky. Přidání okrajů do divize .container neovlivní tabulku. Možná je ve vašem značce/CSS něco jiného, ​​co ovlivňuje rozvržení?

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

Přišel jsem na to, že je to problém. To souvisí s border-collapse. Tentokrát jsem měl stejný problém. Vzhledem k tomu, že tabulky mají často tenké okraje, není problém většině lidí zřejmý. Pokud vložíte běžnou tabulku se šířkou nastavenou na 100% uvnitř div, jak má Nate, budete v pořádku.

Pokud však v tabulce zadáte border-collapse:collapse, tabulka se vylomí z div. To není pro většinu lidí zřejmé, protože se může vymanit pouze z jednoho pixelu, nebo v závislosti na kontextu a uživatelském agentu, možná ne vůbec.

Aby bylo jasnější, co se děje, zkuste to: Dejte Nate příklad vedle příkladu Davida Heggieho do html souboru.

Vypadá to, že obě práce fungují dobře. Nyní ale změňte styl Nate inline TD na border: 40px solid blue. Změňte Davidův styl td na border: 40px solid #999;. V tomto bodě se Davidův stůl vymaní z div o 50% své hranice na každé straně. Nate pořád pracuje. Na stůl Nateho položte styl border-collapse:collapse a jeho přestávky taky.

Je to border-collapse, které to způsobuje!

2
Chris

V případě, že automaticky generujete kód, který na něm může mít okraje, přidejte jednoduchý, unstyled prvek <div>, který obaluje váš stůl, by to mohlo být trik.

1
Nate

Vždy jsem používal <table width="100%">

1
Joe Morgan

Následující kód funguje v IE6/8, Chrome, Firefoxu, 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>

Zkuste zkopírovat a vložit a vytvořit na něm (stačí přesunout část stylu do záhlaví nebo do samostatného souboru .css), možná způsob, jakým používáte vložení CSS inline (pomocí značky stylu), má něco společného s problémem, nebo je to nějaký jiný CSS obklopující div tabulkové bloky? Plovoucí může také způsobit potíže.

P.S. Nastavil jsem červené a modré okraje, abych zjistil, kde se oblasti zvětšují, aby bylo možné provést vizuální kontrolu.

0
Nestor

Možná tento rozsáhlý článek o Internet Explorer a CSS box model pomůže?

0
Christian Davén

To je velký problém s tím, jak CSS zachází s vlastnostmi šířky a důvodem, proč Microsoft implementoval krabicový model jinak. Microsoft ztratil, a teď je to buď šířka nebo okraj/padding/hranice pro prvek. 

Situace se může změnit v CSS3 s vlastnost velikosti boxu

0
buti-oxa

přetečení: auto; na nejvzdálenější div může pomoci, pokud vidíte podivné věci - jako nejvzdálenější div je menší, než chcete, nebo neberete celou velikost divs uvnitř.

0
William

zkuste to:

div {
 padding: 0px;
}

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

nastavením vycpávky div na nulu odstraníte mezeru mezi hranicemi div a jejím obsahem. nastavením šířky tabulky na 100% a jejím rozpětím na nulu odstraníte mezeru mezi hranicemi tabulky a jejím kontejnerem.

0
farzad

Mimochodem, existuje dobrý důvod, proč byste neměli používat přísný doctype? přísný by měl být vždy výchozí. přechodný je určen pouze pro starší kód.

0
Konrad Rudolph