✔ Tabellenbreite

[plinius12]

Ich hoffe das ich mich jetzt richtig ausdrücke.
Also auf meiner seite computeresel.de
wenn ich da im Content bereich links eine Tabelle setzten möchte geht die egal welche breite ich einstelle bis an rechts ran.
bzw. an die zweite Spalte. Wie kann man das ändern, dass die größe die ich einstelle belibt?

 

[Maik]

Hi,

kannst du deinen gescheiterten Versuch auch konkret zeigen / online stellen?

mfg Maik

 

[plinius12]

Ja ich kann eine tabelle mal einfügen.
Egal was ich da mache. Es gehen auch keine Bilder ´neben einander zu setzten.
schaue auf computeresel.de
Siehe, obwohl ich einen Rahmen, Zellauffüllung usw. gelegt habe zeigt es online nichts an.

 

[Maik]

Die Ursache, dass deine gesetzten HTML-Attribute bzgl. der Tabellenbreite und des Rahmen im <table>-Tag vom Browser nicht angenommen werden, findet sich im CSS http://computeresel.de/style.css deiner Seite:

/* 
   Reset
------------------------------------------------------------------- */
... table, ... tr, ... td, ... { /*style.css (Linie 19)*/
border:0 none; /* Rahmen */
...
}

table { /*style.css (Linie 29)*/
...
border-spacing:0; /* Zellabstände = cellspacing */
}

...

/* Tables */
table { /*style.css (Linie 216)*/
...
width:100%; /* Breite */
}

mfg Maik

 

[plinius12]

Ja was soll ich jetzt tun?

 

[Maik]

Die gewünschte Formatierung der Tabelle im Stylesheet vornehmen, und sie hierfür im Anschluß an den zuletzt genannten Regelblock notieren, damit sie alle zuvor deklarierten Regeln in der Kaskade überschreibt.

.post-body table { ... }

mfg Maik

 

[plinius12]

Maik ich bin noch nicht so fit. Ich verstehe im Mom nur Bahnhof
Mir der breite das habe ich jetzt. Aber wie bekomme rahmen usw. hin das man ihn sieht?

 

[Maik]

Also nochmal: Das Stylesheet enthält Regeln, die deine HTML-Attribute außer Kraft setzen. Also nimmst du die Formatierung ebenfalls im CSS-Code vor. Damit es darin aber auch funktioniert, ist es wichtig, die neuen Regeln nach den oben genannten Regeln anzugeben, damit der Browser diese überschreibt.

            <table cellspacing="2">
              <tr>
                <td>Hier ist dei tabelle</td>
              </tr>
            </table>

/* Tables */
table { 
	margin-bottom: 1.4em;
	width: 100%;
}
...

/* Ab hier geht's für dich in etwa so weiter */
.post-body table { 
        width:200px;
        border-spacing:2px;
}
.post-body table,
.post-body table td {
        border:2px solid #eee;
}
.post-body table td {
        padding:2px;
}

mfg Maik

 

[plinius12]

Ich blicke es zwar nicht. Aber vieleicht kommt es ja mit der zeit.
Wenn ich es auf 200 stelle nimmt es die ganze breite ein. auf 100 gehts ja auch.. Wenn ich aber eine Tabelle daneben setzte nimmt die auch 100 ein. Ich möchte beide unterschiedlich verstellen können.
Also, dies steht bei mir im CSS drin
/* Tables */

table {margin-bottom: 1.4em; width: 100%;}
th {font-weight: bold;}
thead th {background: #C3D9FF;}
th,td,caption {padding: 4px 10px 4px 5px;}
tr.even td {background: #F2F6FA;}
tfoot {font-style: italic;}
caption {background: #EEE;}

table.data-table {
border: 1px solid #CCB;
margin-bottom: 2em;
width: 100%;
}
table.data-table th {
background: #F0F0F0;
border: 1px solid #DDD;
color: #555;
text-align: left;
}
table.data-table tr {border-bottom: 1px solid #DDD;}
table.data-table td, table th {padding: 10px;}
table.data-table td {
background: #F6F6F6;
border: 1px solid #DDD;
}
table.data-table tr.even td {background: #FCFCFC;}
ich bekomme einfach keine variable breite bzw nicht hin das man die Zellen sieht.

 

[Maik]

ich bekomme einfach keine variable breite bzw nicht hin das man die Zellen sieht.

Wenn du dich einfach an meinen Ratschlag hälst, und ihn genauso, wie von mir beschrieben, im Stylesheet umsetzt, bekommst auch du es hin

Meinen Code-Vorschlag von vorhin habe ich jetzt kurzerhand per "copy&paste" an der Stelle deines CSS eingesetzt, wo es in deinem letzten Beitrag endet, und der Tabelle anstelle meines ursprünglich hellgrau definierten Rahmens nun einen roten gegönnt.

Et voilà:



Wenn dort zwei Tabellen unterschiedliche Breite besitzen sollen, differenzierst du hier eben mittels eines ID-Bezeichner:

<table id="tabelle1" cellspacing="2"><tr><td>Hier ist die Tabelle 1</td></tr></table>
<table id="tabelle2" cellspacing="2"><tr><td>Hier ist die Tabelle 2</td></tr></table>

.post-body table {
        border-spacing:2px;
        float:left; /* damit die beiden Tabellen nebeneinander ausgerichtet werden */
        margin-right:10px;
}
.post-body table#tabelle1 {
        width:150px;
}
.post-body table#tabelle2 {
        width:250px;
}

Das Resultat:




mfg Maik