✔ Tabellenbreite stimmt nicht

[Thomas_Jung]

Hallo

Warum werden die zwei Tabellen nicht gleich breit dargestellt?

<style>
th.list {
    background-image:url(images/silver_nav.png);
    padding:3px;
    padding-left:5px;
    vertical-align:middle;
    font-size:12px;
    margin-bottom: 0px;
    border: 1px solid #C0C0C0;
    font-weight: normal;
    text-align:left;
}
.zelle_g {
    margin-top:1px;
    background: #F9F9F9;
    /* border: 1px solid #E4E4E4; */
	border-left: 1px solid #E4E4E4;
	border-right: 1px solid #E4E4E4;
	border-bottom: 1px solid #E4E4E4;
    padding: 5px;
    vertical-align:top; /* add by xaron */
}
</style>

<table style="width:900px; table-layout:fixed; border-collapse:collapse;">
  <tr>
	<th class="list" style="width:150px;">a</th>
	<th class="list" style="width:150px;">b</th>
	<th class="list" style="width:150px;">c</th>
	<th class="list" style="width:150px;">d</th>
	<th class="list" style="width:150px;">e</th>
	<th class="list" style="width:150px;">f</th>
</tr><tr>
    <td class="zelle_g" style="width:150px;">a</td>
    <td class="zelle_g" style="width:150px;">b</td>
    <td class="zelle_g" style="width:150px;">c</td
    <td class="zelle_g" style="width:150px;">d</td>
    <td class="zelle_g" style="width:150px;">e</td
    <td class="zelle_g" style="width:150px;">f</td>
  </tr>
</table>

<table style="width:900px; table-layout:fixed; border-collapse:collapse;">
  <tr>
	<th class="list" style="width:300px;">a</th>
	<th class="list" style="width:300px;">b</th>
	<th class="list" style="width:300px;">c</th>
</tr><tr>
    <td class="zelle_g" style="width:300px;">a</td>
    <td class="zelle_g" style="width:300px;">b</td>
    <td class="zelle_g" style="width:300px;">c</td
  </tr>
</table>

Gruß Thomas

 

[Paspirgilis]

Erstmal ne antwort:

Weil 2x8 16 sind.
du benutzt obene einen padding von 5px und 3 px nach links und rechts.
unten benutzt du 5px und 5px.
oben sind immer zwei kästen so lang wie einer unten allerdings mit 2x8px
unten dann nur 10px padding.

Jetzt ein verbesserungsvorschlag:

Warum benutzt du nicht thead und tbody mit td's darin und packst alles in eine Tabelle, weil es bis jetzt so aussieht als ob du eine tabelle anzeigen möchtest.

Noch ein verbesserungsvorschlag:
Beklariere die länge der thead td's und gebe den td's in tbody colspan=2

MFG
Mark Paspirgilis

 

[Thomas_Jung]

Hallo Paspirgilis

Und warum sind Sie jetzt nicht gleich?

<style>
th.list {
    background-image:url(images/silver_nav.png);
}
.zelle_g {
    background: #F9F9F9;
}
</style>

<table style="width:900px; table-layout:fixed; border-collapse:collapse;">
  <tr>
	<th class="list" style="width:150px;">a</th>
	<th class="list" style="width:150px;">b</th>
	<th class="list" style="width:150px;">c</th>
	<th class="list" style="width:150px;">d</th>
	<th class="list" style="width:150px;">e</th>
	<th class="list" style="width:150px;">f</th>
</tr><tr>
    <td class="zelle_g" style="width:150px;">a</td>
    <td class="zelle_g" style="width:150px;">b</td>
    <td class="zelle_g" style="width:150px;">c</td
    <td class="zelle_g" style="width:150px;">d</td>
    <td class="zelle_g" style="width:150px;">e</td
    <td class="zelle_g" style="width:150px;">f</td>
  </tr>
</table>

<table style="width:900px; table-layout:fixed; border-collapse:collapse;">
  <tr>
	<th class="list" style="width:300px;">a</th>
	<th class="list" style="width:300px;">b</th>
	<th class="list" style="width:300px;">c</th>
</tr><tr>
    <td class="zelle_g" style="width:300px;">a</td>
    <td class="zelle_g" style="width:300px;">b</td>
    <td class="zelle_g" style="width:300px;">c</td
  </tr>
</table>

Gruß Thomas

 

[Loomis]

Hi,

welchen Browser verwendest du? Internet Explorer und Firefox zeigen das bei mir richtig an.
(Mit richtig meine ich, es tut was der Quellcode sagt)

//edit: Opera zeigt mir das übrigens auch wie erwartet an.

//edit2: Schreib mal folgendes an den Anfang des Stylesheets:

* {margin:0; padding:0}

 

[Thomas_Jung]

Hallo

Internet Explorer 7 ist alles OK
Beim Firefox 3 war die unterste Tabelle zu kurz.
So funktioniert es.

Danke
Gruß Thomas

<style>
th.list {
	margin:0; padding:0;
    background-image:url(images/silver_nav.png);
}
.zelle_g {
	margin:0; padding:0;
    background: #F9F9F9;
}
</style>

 

[Maik]

<table style="width:900px; table-layout:fixed; border-collapse:collapse;">
  <tr>
	<th class="list" style="width:150px;">a</th>
	<th class="list" style="width:150px;">b</th>
	<th class="list" style="width:150px;">c</th>
	<th class="list" style="width:150px;">d</th>
	<th class="list" style="width:150px;">e</th>
	<th class="list" style="width:150px;">f</th>
</tr><tr>
    <td class="zelle_g" style="width:150px;">a</td>
    <td class="zelle_g" style="width:150px;">b</td>
    <td class="zelle_g" style="width:150px;">c</td
    <td class="zelle_g" style="width:150px;">d</td>
    <td class="zelle_g" style="width:150px;">e</td
    <td class="zelle_g" style="width:150px;">f</td>
  </tr>
</table>

<table style="width:900px; table-layout:fixed; border-collapse:collapse;">
  <tr>
	<th class="list" style="width:300px;">a</th>
	<th class="list" style="width:300px;">b</th>
	<th class="list" style="width:300px;">c</th>
</tr><tr>
    <td class="zelle_g" style="width:300px;">a</td>
    <td class="zelle_g" style="width:300px;">b</td>
    <td class="zelle_g" style="width:300px;">c</td
  </tr>
</table>

Fällt dir in dem Syntax-Highlighter nicht auf, dass da bei diversen </td>-Tags die schliessende >-Klammer fehlt?

mfg Maik

 

[kuddeldaddeldu]

Hi,

wenn Du auf padding in den Zellen nicht verzichten willst, musst Du Dir das Boxmodell zu Gemüte führen. Die Tabellen in Deinem Beispiel aus dem Eingangspost sind nämlich beide breiter als 900px, da zur angegebenen Breite der Zellen noch die Innen- und Außenabstände und die Rahmen hinzugezählt werden.

Bei der oberen Tabelle hast Du also 6 Zellen à 150px + 8px padding, macht schonmal 948, plus 7 Rahmenpixel = 955 Pixel. In der unteren Tabelle kannst Du jetzt nicht einfach die Zellenbreite verdoppeln. Du musst berücksichtigen, dass Du 3 Rahmenpixel weniger hast und nur 8 Pixel padding (zwei 150er Zellen haben zusammen 16 Pixel padding).

LG