verschiedene Tabellenbreite innerhalb einer Tabelle
mook
- html
0 Gernot Back-1 tim-1 tim0 mook0 Gernot Back0 mook
Hallo,
folgende Tabelle:
<table style="width:400px">
<tr><td style="width:80%">bla1</td><td style="width:20%">bla2</td></tr>
<tr><td style="width:20%">blu1</td><td style="width:80%">blu2</td></tr></table>
Ich moechte, dass die Breitenverhaeltnisse so aussehen, wie ich sie auch bestimmt habe.
Aber wenn ich sie mit dem Browser oeffne, habe ich fuer beide rows dieselben breitenverhaeltnisse.
so in etwa moechte ich das haben:
|---------|
|80 | 20|
|---------|
|20 | |
|---------|
Kann mir jemand weiterhelfen?
danke
Hallo mook,
<table style="width:400px">
<tr><td style="width:80%">bla1</td><td style="width:20%">bla2</td></tr>
<tr><td style="width:20%">blu1</td><td style="width:80%">blu2</td></tr></table>
|---------|
|80 | 20|
|---------|
|20 | |
|---------|
Dafür solltest du als erstes mit einer weiteren Zeile mit drei vordefinierten Zellen (die mittlere mit einer Breite von 60%) und dem colspan-Attribut arbeiten.
Gruß Gernot
so?
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="80%"> </td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="80%"> </td>
</tr>
</table></td>
</tr>
</table>
uups!
doch lieber so:
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="80%"> </td>
</tr>
</table></td>
<td width="20%"> </td>
</tr>
<tr>
<td width="20%"> </td>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="80%"> </td>
</tr>
</table></td>
</tr>
</table>
aha, danke.
hm. etwas 'leichtere'(im sinne von weniger codes) loesung per css gibt es nicht..?
uups!
doch lieber so:
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr>
<td width="80%"> </td>
</tr>
</table></td>
<td width="20%"> </td>
</tr>
<tr>
<td width="20%"> </td>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr>
<td width="80%"> </td>
</tr>
</table></td>
</tr>
</table>
Hallo mook,
ohne Tim zu nahe treten zu wollen, die klassische Lösung ist das nicht, dann schon eher diese hier:
<table style="[code lang=css]width:100%;table-layout:fixed
~~~" border="1">
<colgroup>
<col width="20%">
<col width="60%">
<col width="20%">
</colgroup>
<tr>
<td colspan="2" style="`width:80%`{:.language-css}"> </td>
<td style="`width:20%`{:.language-css}"> </td>
</tr>
<tr>
<td style="`width:20%`{:.language-css}"> </td>
<td colspan="2" style="`width:80%`{:.language-css}"> </td>
</tr>
</table>
[/code]
Gruß Gernot
ah~ das ist es genau.
danke Gernot
danke Tim.
Hallo mook,
ohne Tim zu nahe treten zu wollen, die klassische Lösung ist das nicht, dann schon eher diese hier:
<table style="[code lang=css]width:100%;table-layout:fixed
> <colgroup>
> <col width="20%">
> <col width="60%">
> <col width="20%">
> </colgroup>
> <tr>
> <td colspan="2" style="`width:80%`{:.language-css}"> </td>
> <td style="`width:20%`{:.language-css}"> </td>
> </tr>
> <tr>
> <td style="`width:20%`{:.language-css}"> </td>
> <td colspan="2" style="`width:80%`{:.language-css}"> </td>
> </tr>
> </table>
> [/code]
>
> Gruß Gernot