Christian Seiler: Überlauf verhindern und stattdessen das Element vergrößern

Beitrag lesen

Hallo Axel,

Wer das Gegenteil behauptet, der macht diese Darstellung ohne Tabellen nach.

<html>
<head>
<title>Tabellenzellen</title>
<style type="text/css">
  .tfw {
    display: table;
    width: 100%;
    margin-bottom: 4px;
    margin-top: 4px;
  }
  .tfwtd {
    width:100%;
    border:1px solid red;
    padding:10px;
    display: table-cell;
    vertical-align: middle;
  }
</style>
</head>
<body>
<div class="tfw">
  <div class="tfwtd" style="white-space:nowrap;">beliebig langer Zeileninhalt</div>
</div>
<div class="tfw">
  <div class="tfwtd" style="white-space:nowrap;">beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt</div>
</div>
<div class="tfw">
  <div class="tfwtd" style="height:200px;">beliebig langer Zeileninhalt</div>
</div>
<div clasS="tfw">
  <div class="tfwtd" style="height:200px;">beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt beliebig langer Zeileninhalt</div>
</div>
</body>
</html>

Ja, ich weiß, schön ist anders.

Getestet: Mozilla 1.3, Konqueror 3.1.1, Opera 7.10 Beta 1, alle Linux. IE müßte es übrigens auch tun. (da er sich ja sowieso verhält, wie gewünscht) Eventuell müssen noch weitere <div>s her wegen des Box model bug bzw. weil der IE sonst die width:100%;-Angaben im standards compliance mode richtig versteht, aber display: table-cell/table nicht kann und deswegen die divs etwas zu breit macht.

.oO(gilt das auch als Tabelle?)

Viele Grüße,
Christian

--
Ich bin ein Bandbreitenverschwender. Meine Signatur tut mir leid. Ehrlich!