Block unterbindet Größenformatierung

Status
Nicht offen für weitere Antworten.
S

sadi

Mitglied
Hallo auch,
ich habe ein kleines Problem mit der Größenformatierung von Tabellen. Ich baue dynamisch mehrere Tabellen im Hintergrund auf, welche auf "display: none" gestellt sind. Die Tabellen sind in einem Div eingebettet. Über einen Button (display: block) mache ich das Div samt einer Tabelle sichtbar. Diese Tabelle ist auf display: block gestellt. Leider ist nun die Breite der Tabelle nicht mehr 100% so breit wie das DIV, sondern so breit wie der Text es in den Zellen hergibt. Liegt das an der Definition als Block und kann man was dagegen machen?

Gruß

Sascha
 
Leider gibts da nix online, aber ich habe mal ein screenshot angehangen. Die Tabelle rechts sollt eigentlich über die gesamte Breite gehen.
 

Anhänge

  • screen.jpg
    screen.jpg
    17,5 KB · Aufrufe: 17
Besitzt denn die Tabelle auch die Breitenangabe width="100%" bzw. style="width:100%"?
 
Vielleicht hilft es, wenn du die Tabelle(n) nicht mit display:block formatierst?
 
Ich habe es schon mit dem visible Attribut versucht. Bei dieser Variante wird zwar die Tabelle ausgeblendet, allerdings nimmt sie dennoch den Platz ein, sodass ein leerer Bereich entsteht.
 
In diesem Beispiel behält die Tabelle ihre 100%-Breite:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="michaelsinterface">
<title></title>

<script type="text/javascript">
<!--
function ShowHide(id) {
    obj = document.getElementsByTagName("div");
    if (obj[id].style.display == 'block'){
    obj[id].style.display = 'none';
    }
    else {
    obj[id].style.display = 'block';
    }
}
//-->
</script>

<style type="text/css">
<!--
table,td {
border:1px solid #000;
border-collapse:collapse;
}

table {
width:100%;
}

#box {
display:none;
}
-->
</style>

</head>
<body>

<a href="#" onclick="ShowHide('box')">ShowHide Box</a>
<div id="box">
     <table>
            <tr><td>dummy text</td><td>dummy text</td><td>dummy text</td><td>dummy text</td></tr>
     </table>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück