Tabellenzellen untereinander

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
mein-wunschname

mein-wunschname hat kostenlosen Webspace.

17:58, 12.8.2015
In einer fest vorgegeben HTML-Struktur (Tabelle mit 4 Spalten) will ich die Zellen einer Tabelle will ich die Zellen teilweise untereinander darstellen.
Es ist kein Problem alle Zellen mit display:block untereinander zu gruppieren. Ich würde es aber gern so haben, dass 2 Zellen nebeneinander und die nächsten 2 Zellen darunter dargestellt werden. Alle Versuche (z.B. in dem ich jede 2. Zelle mit display:block formatiere) funktionieren aber nicht.
Hat jemand eine Idee, wie man das machen könnte?
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
staymyfriend

staymyfriend hat kostenlosen Webspace.
21:54, 12.8.2015
Hallo,
verstehe dein Problem gerade nicht...
```
<table>
   <tr>
      <td>Zelle 1</td><td>Zelle 2</td>
   </tr>
   <tr>
      <td>Zelle 3</td><td>Zelle 4</td>
   </tr>
</table>
```
Beitrag zuletzt geändert: 12.8.2015 21:55:03 von staymyfriend

~~j*********r~~

22:25, 12.8.2015

staymyfriend schrieb:
Hallo,
verstehe dein Problem gerade nicht...
<table>
   <tr>
      <td>Zelle 1</td><td>Zelle 2</td>
   </tr>
   <tr>
      <td>Zelle 3</td><td>Zelle 4</td>
   </tr>
</table>

So funktioniert es ja tatsächlich auch, allerdings wollte der TE ja die Tabelle mit vier Spalten erhalten. Deshalb müsstest du in CSS so vorgehen:

#tabelle {
   widht: 300px; /*Halt den Wert eingeben, den du möchtest/benötigst. Natürlich geht auch 100%*/
}
#tabelle td {
   float: left;
   width: 50%;
}

Autor dieses Themas

mein-wunschname

mein-wunschname hat kostenlosen Webspace.

23:18, 12.8.2015

jonas-bayer schrieb:
...allerdings wollte der TE ja die Tabelle mit vier Spalten erhalten.

Genau, HTML sollte ja nicht verändert werden. Insofern war der Ansatz von @jonas-bayer schon sehr hilftreich (ich habe einfach zu kompliziert gedacht). Allerdings funktioniert 50% nicht ganz, weil im Browserstandard immer noch ein paar Abstände dazukommen, man macht also entweder 49% oder so:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flexible Tabelle</title>
    <style>
        #wrap{
            width:800px;
        }
        table{
            border-spacing: 0;
            width:100%;
        }
        table td{
            border-width: 0;
            padding:0;
            float:left;
            width:50%;
        }
    </style>
</head>
<body>
<div id="wrap">
<table>
    <tr>
        <td>z1s1</td>
        <td>z1s2</td>
        <td>z1s3</td>
        <td>z1s4</td>
    </tr>
    <tr>
        <td>z2s1</td>
        <td>z2s2</td>
        <td>z2s3</td>
        <td>z2s4</td>
    </tr>
</table>
</div>

</body>
</html>

~~j*********r~~
6:39, 13.8.2015
Dann musst du die Breite entweder mit JavaScript/jQuery berechnen, oder die CSS3 - calc() Methode benutzen: http://caniuse.com/#search=calc()

Damit kannst du die Abstände, die noch durch Padding und Border entstehen abziehen, also bspw:
```
width: calc(50% - 4px);
```
mfg
Jonas
staymyfriend

staymyfriend hat kostenlosen Webspace.

15:18, 13.8.2015
Hallo nochmal,

habe hier deinen HTML Code genommen und ein bisschen am CSS gefeilt... im Firefox sieht alles richtig aus! Sogar mit border > 0 ...

Beitrag zuletzt geändert: 13.8.2015 15:20:46 von staymyfriend
Autor dieses Themas
mein-wunschname

mein-wunschname hat kostenlosen Webspace.

8:34, 14.8.2015

staymyfriend schrieb:
Hallo nochmal,

habe hier deinen HTML Code genommen und ein bisschen am CSS gefeilt... im Firefox sieht alles richtig aus! Sogar mit border > 0 ...

Danike, habe deine Variante mal sicherheitshalber geforkt.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city