HTML - Überschneidende Spalten in Tabelle

Übersicht

Sonstiges

Smalltalk

	Der Eisvogel Betreff: HTML - Überschneidende Spalten in Tabelle	Fr, Jun 24, 2011 12:14 Antworten mit Zitat
Hallo Ich möchte mir derzeit eine Tabelle in HTML zurechtschreiben, dass sie am Schluss so aussieht: Die Farben spiele keine Rolle. Das Layout will mir nicht gelingen. Die rechte kleine Spalte im unteren Bereich soll genau 100px breit sein, bei allen anderen ist es nicht wichtig. Jetzt dachte ich mir um das zu erreichen, überschneide ich die Zellen mittels colspan zwischen den roten Linien. Leider klappt das natürlich nicht da dieses Feld jetzt nirgends defniert ist und somit auf minimale Breite skaliert wird. Wo kann ich diese Spalte definieren, so dass sie nicht extra angezeigt wird, und vor allen dingen, wie muss ich sie defnieren? Hier meine Tabelle in HTML: Code: [AUSKLAPPEN] [EINKLAPPEN] <table border="1" width="100%"> <tr> <th>Spalte 1</th> <th colspan="2">Spalte 2</th> </tr> <tr> <td>Beschreibung 1</td> <td colspan="2">Beschreibung 2</td> </tr> <tr> <th colspan="2">Spalte 1</th> <th width="100px">Spalte 3</th> </tr> <tr> <td colspan="2">Beschreibung 1</td> <td>Beschreibung 3</td> </tr> </table> MfG Der Eisvogel
Ungarische Notation kann nützlich sein. BlitzMax ; Blitz3D Win 7 Pro 64 Bit ; Intel Core i7-860 ; 8 GB Ram ; ATI HD 5750 1 GB Projekte: Window-Crasher Ich liebe es mit der WinAPI zu spielen.

Der Eisvogel

Betreff: HTML - Überschneidende Spalten in Tabelle

Fr, Jun 24, 2011 12:14
Antworten mit Zitat

Hallo

Ich möchte mir derzeit eine Tabelle in HTML zurechtschreiben, dass sie am Schluss so aussieht:
user posted image

Die Farben spiele keine Rolle. Das Layout will mir nicht gelingen. Die rechte kleine Spalte im unteren Bereich soll genau 100px breit sein, bei allen anderen ist es nicht wichtig. Jetzt dachte ich mir um das zu erreichen, überschneide ich die Zellen mittels colspan zwischen den roten Linien. Leider klappt das natürlich nicht da dieses Feld jetzt nirgends defniert ist und somit auf minimale Breite skaliert wird. Wo kann ich diese Spalte definieren, so dass sie nicht extra angezeigt wird, und vor allen dingen, wie muss ich sie defnieren?

user posted image

Hier meine Tabelle in HTML:
Code: [AUSKLAPPEN]

<table border="1" width="100%">
<tr>
<th>Spalte 1</th>
<th colspan="2">Spalte 2</th>
</tr>
<tr>
<td>Beschreibung 1</td>
<td colspan="2">Beschreibung 2</td>
</tr>
<tr>
<th colspan="2">Spalte 1</th>
<th width="100px">Spalte 3</th>
</tr>
<tr>
<td colspan="2">Beschreibung 1</td>
<td>Beschreibung 3</td>
</tr>
</table>

MfG
Der Eisvogel

Ungarische Notation kann nützlich sein.
BlitzMax ; Blitz3D
Win 7 Pro 64 Bit ; Intel Core i7-860 ; 8 GB Ram ; ATI HD 5750 1 GB
Projekte: Window-Crasher
Ich liebe es mit der WinAPI zu spielen.

	c64 Betreff: Hi,	Fr, Jun 24, 2011 12:51 Antworten mit Zitat
Vllt. nicht die Ultimative Lösung aber zumindest eine !! habs mit 2 Tabellen gelöst, im FF läufts! achja und ich hab 200px genommen, soll ja auch nur als Lösungsansatz dienen! Code: [AUSKLAPPEN] [EINKLAPPEN] <table border="1" width="100%" style="border-bottom:none"> <tr> <th >Spalte 1</th> <th colspan="2">Spalte 2</th> </tr> <tr> <td>Beschreibung 1</td> <td colspan="2">Beschreibung 2</td> </tr> </table> <table border="1" width="100%" style="border-top:none"> <tr> <th width="200px" colspan="2">Spalte 1</th> <th>Spalte 3</th> </tr> <tr> <td colspan="2">Beschreibung 1</td> <td >Beschreibung 3</td> </tr> </table> mfg. C64
Betreten verboten! Kinder haften für ihre Eltern!

c64

Betreff: Hi,

Fr, Jun 24, 2011 12:51
Antworten mit Zitat

Vllt. nicht die Ultimative Lösung aber zumindest eine Wink

!!

habs mit 2 Tabellen gelöst, im FF läufts! achja und ich hab 200px genommen, soll ja auch nur als Lösungsansatz dienen!

Code: [AUSKLAPPEN]

<table border="1" width="100%" style="border-bottom:none">
<tr>
<th >Spalte 1</th>
<th colspan="2">Spalte 2</th>
</tr>
<tr>
<td>Beschreibung 1</td>
<td colspan="2">Beschreibung 2</td>
</tr>
</table>
<table border="1" width="100%" style="border-top:none">
<tr>
<th width="200px" colspan="2">Spalte 1</th>
<th>Spalte 3</th>
</tr>
<tr>
<td colspan="2">Beschreibung 1</td>
<td >Beschreibung 3</td>
</tr>
</table>

mfg. C64

Betreten verboten! Kinder haften für ihre Eltern!

	Der Eisvogel	Fr, Jun 24, 2011 12:59 Antworten mit Zitat
Das Problem an der Sache mit 2 Tabellen ist leider, dass ich das nicht so ohne weiteres machen kann. Ich mache grade ein MOD für phpBB und die Tabelle wird für den Admin-Bereich benötigt. Die Tabelle soll später noch mit einigen anderen Elementen verbunden werden, da wird das ein wenig schwierig. Außerdem würde es mir die Ausgabe von PHP aus erschweren. Wie du gesagt hast, es ist eine Lösung, aber nicht die Ultimative. Sofern es keine andere Möglichkeit gibt, muss ich das wohl so machen, auch wenns ewig dauern wird, dass so zu schreiben das es geht. MfG Der Eisvogel
Ungarische Notation kann nützlich sein. BlitzMax ; Blitz3D Win 7 Pro 64 Bit ; Intel Core i7-860 ; 8 GB Ram ; ATI HD 5750 1 GB Projekte: Window-Crasher Ich liebe es mit der WinAPI zu spielen.

Der Eisvogel

Fr, Jun 24, 2011 12:59
Antworten mit Zitat

Das Problem an der Sache mit 2 Tabellen ist leider, dass ich das nicht so ohne weiteres machen kann. Ich mache grade ein MOD für phpBB und die Tabelle wird für den Admin-Bereich benötigt. Die Tabelle soll später noch mit einigen anderen Elementen verbunden werden, da wird das ein wenig schwierig. Außerdem würde es mir die Ausgabe von PHP aus erschweren.

Wie du gesagt hast, es ist eine Lösung, aber nicht die Ultimative. Sofern es keine andere Möglichkeit gibt, muss ich das wohl so machen, auch wenns ewig dauern wird, dass so zu schreiben das es geht.

MfG
Der Eisvogel

Ungarische Notation kann nützlich sein.
BlitzMax ; Blitz3D
Win 7 Pro 64 Bit ; Intel Core i7-860 ; 8 GB Ram ; ATI HD 5750 1 GB
Projekte: Window-Crasher
Ich liebe es mit der WinAPI zu spielen.

	Xeres Moderator	Fr, Jun 24, 2011 13:09 Antworten mit Zitat
selfhtml.org
Win10 Prof.(x64)/Ubuntu 16.04\|CPU 4x3Ghz (Intel i5-4590S)\|RAM 8 GB\|GeForce GTX 960 Wie man Fragen richtig stellt \|\| "Es geht nicht" \|\| Video-Tutorial: Sinus & Cosinus THERE IS NO FAIR. THERE IS NO JUSTICE. THERE IS JUST ME. (Death, Discworld)

Xeres

Moderator

Fr, Jun 24, 2011 13:09
Antworten mit Zitat

selfhtml.org Rolling Eyes

Win10 Prof.(x64)/Ubuntu 16.04|CPU 4x3Ghz (Intel i5-4590S)|RAM 8 GB|GeForce GTX 960
Wie man Fragen richtig stellt || "Es geht nicht" || Video-Tutorial: Sinus & Cosinus
THERE IS NO FAIR. THERE IS NO JUSTICE. THERE IS JUST ME. (Death, Discworld)

	Xaymar ehemals "Cgamer"	Fr, Jun 24, 2011 13:17 Antworten mit Zitat
Code: [AUSKLAPPEN] [EINKLAPPEN] <table> <colgroup> <col width=> <col width=> <col width="100px"> </colgroup> ... </table> Diese ein-Link-posts nerven, also geb ich dir einfach den Hinweis womit das geht.
Warbseite

Xaymar

ehemals "Cgamer"

Fr, Jun 24, 2011 13:17
Antworten mit Zitat

Code: [AUSKLAPPEN]

Diese ein-Link-posts nerven, also geb ich dir einfach den Hinweis womit das geht.

Warbseite

	Der Eisvogel	Fr, Jun 24, 2011 13:20 Antworten mit Zitat
Cool, danke das geht. Ich hatte davon glaube ich schonmal gehört. Ich glaub damals gelesen zu haben, dass es mangels kompatibilität zu verschiedenen Browsern noch nicht genutzt werden sollte.
Ungarische Notation kann nützlich sein. BlitzMax ; Blitz3D Win 7 Pro 64 Bit ; Intel Core i7-860 ; 8 GB Ram ; ATI HD 5750 1 GB Projekte: Window-Crasher Ich liebe es mit der WinAPI zu spielen.

Der Eisvogel

Fr, Jun 24, 2011 13:20
Antworten mit Zitat

Cool, danke das geht.

Ich hatte davon glaube ich schonmal gehört. Ich glaub damals gelesen zu haben, dass es mangels kompatibilität zu verschiedenen Browsern noch nicht genutzt werden sollte.

Ungarische Notation kann nützlich sein.
BlitzMax ; Blitz3D
Win 7 Pro 64 Bit ; Intel Core i7-860 ; 8 GB Ram ; ATI HD 5750 1 GB
Projekte: Window-Crasher
Ich liebe es mit der WinAPI zu spielen.

	BtbN	Fr, Jun 24, 2011 13:26 Antworten mit Zitat
Code: [AUSKLAPPEN] [EINKLAPPEN] <table border="1" width="100%"> <colgroup> <col width="100px" /> <col width="100%" /> <col width="100px" /> </colgroup> <tr> <th>Spalte 1</th> <th colspan="2">Spalte 2</th> </tr> <tr> <td>Beschreibung 1</td> <td colspan="2">Beschreibung 2</td> </tr> <tr> <th colspan="2">Spalte 1</th> <th>Spalte 3</th> </tr> <tr> <td colspan="2">Beschreibung 1</td> <td>Beschreibung 3</td> </tr> </table> Edit: zu spät

BtbN

Fr, Jun 24, 2011 13:26
Antworten mit Zitat

Code: [AUSKLAPPEN]

<table border="1" width="100%">
<colgroup>
<col width="100px" />
<col width="100%" />
<col width="100px" />
</colgroup>
<tr>
<th>Spalte 1</th>
<th colspan="2">Spalte 2</th>
</tr>
<tr>
<td>Beschreibung 1</td>
<td colspan="2">Beschreibung 2</td>
</tr>
<tr>
<th colspan="2">Spalte 1</th>
<th>Spalte 3</th>
</tr>
<tr>
<td colspan="2">Beschreibung 1</td>
<td>Beschreibung 3</td>
</tr>
</table>

Edit: zu spät

	Eingeproggt	Fr, Jun 24, 2011 13:49 Antworten mit Zitat
Mal so frei von der Leber weg n Versuch das alles mittels CSS zu managen: HTML Code: [AUSKLAPPEN] [EINKLAPPEN] <div class="tablediv small"> Links oben </div> <div class="tablediv big"> Rechts oben </div> <div class="newrow"></div> <div class="tablediv big"> Links unten </div> <div class="tablediv small"> Rechts unten </div> dazugehöriges CSS Code: [AUSKLAPPEN] [EINKLAPPEN] .tablediv { float:left; display:inline-block; border:1px solid #000; } .small {width:100px; } .big { width:300px; } .newrow { clear:left; } Is nicht getestet aber vielleicht eine Inspiration. War anfangs auch skeptisch gegen diesen "tollen" Ratschlag auf tables zu verzichten... aber wenn man sich dran gewöhnt gehts ja mfG, Christoph.
Gewinner des BCC 18, 33 und 65 sowie MiniBCC 9

Eingeproggt

Fr, Jun 24, 2011 13:49
Antworten mit Zitat

Mal so frei von der Leber weg n Versuch das alles mittels CSS zu managen:

HTML
Code: [AUSKLAPPEN]

<div class="tablediv small">
Links oben
</div>
<div class="tablediv big">
Rechts oben
</div>
<div class="newrow"></div>
<div class="tablediv big">
Links unten
</div>
<div class="tablediv small">
Rechts unten
</div>

dazugehöriges CSS
Code: [AUSKLAPPEN]

.tablediv { float:left; display:inline-block; border:1px solid #000; }
.small {width:100px; }
.big { width:300px; }
.newrow { clear:left; }

Is nicht getestet aber vielleicht eine Inspiration. War anfangs auch skeptisch gegen diesen "tollen" Ratschlag auf tables zu verzichten... aber wenn man sich dran gewöhnt gehts ja Wink

mfG, Christoph.

Gewinner des BCC 18, 33 und 65 sowie MiniBCC 9

	Der Eisvogel	Fr, Jun 24, 2011 14:12 Antworten mit Zitat
Persählich bevorzuge ich auch CSS, bin kein Fan von Tabellen. Jedoch ist es im phpBB nunmal so, dass die Sachen auf Tabellen basieren, und da möchte ich mit meinem MOD nur ungern raustanzen. Ich möchte das in dem Bereich einheitlich halten. Aber allgemein würde ich immer auf CSS und Container setzen, definitiv. MfG Der Eisvogel
Ungarische Notation kann nützlich sein. BlitzMax ; Blitz3D Win 7 Pro 64 Bit ; Intel Core i7-860 ; 8 GB Ram ; ATI HD 5750 1 GB Projekte: Window-Crasher Ich liebe es mit der WinAPI zu spielen.

Der Eisvogel

Fr, Jun 24, 2011 14:12
Antworten mit Zitat

Persählich bevorzuge ich auch CSS, bin kein Fan von Tabellen. Jedoch ist es im phpBB nunmal so, dass die Sachen auf Tabellen basieren, und da möchte ich mit meinem MOD nur ungern raustanzen. Ich möchte das in dem Bereich einheitlich halten.

Aber allgemein würde ich immer auf CSS und Container setzen, definitiv.

MfG
Der Eisvogel

Ungarische Notation kann nützlich sein.
BlitzMax ; Blitz3D
Win 7 Pro 64 Bit ; Intel Core i7-860 ; 8 GB Ram ; ATI HD 5750 1 GB
Projekte: Window-Crasher
Ich liebe es mit der WinAPI zu spielen.

Übersicht

Sonstiges

Smalltalk

Nach Oben

BlitzBasic Portal

HTML - Überschneidende Spalten in Tabelle

Betreff: HTML - Überschneidende Spalten in Tabelle

Betreff: Hi,