Spaltenbreite
bearbeitet vonHi Auge,
danke für das schnelle Feedback. Die position:relative benötige ich nur dafür, um die Tabelle etwas nach unten zu verschieben, da ich oberhalb noch eine Menüleiste habe, die mit dem gesamten Konstrukt aber sonst nichts zu tun hat.
Ich habe jetzt noch mal folgendes probiert, in der Hoffnung, dass die Tabelle etwa 75% der Seite ausfüllt. Den HTML-Code poste ich jetzt nicht noch mal extra, in dem steht einfach eine Tabelle mit 8 Spalten, die jeweils mit Einträgen gefüllt sind. Die CSS sieht so aus:
~~~css
body{
align:center;
}
table{
position:relative;
top:10em;
margin:0 auto;
border-collapse:collapse;
table-layout:fixed;
}
th, td{
width:9%;
}
th:nth-of-type(2), td:nth-of-type(2){
width:22.5%;
}
th:first-child, td:first-child, th:nth-of-type(3), td:nth-of-type(3){
width:7.5%;
}
th:nth-of-type(4), td:nth-of-type(4), th:nth-of-type(5), td:nth-of-type(5){
width:5.25%;
}
~~~
Meine bescheidenen Rechenküste kommen dabei auf folgende Summe wenn ich alle Spaltenbreiten addiere:
7.5 + 22.5 + 7.5 + 5.25 + 5.25 + 9 + 9 + 9 = 75
Die Tabelle füllt aber nicht mal die Hälfte der Seite aus. Why?
> Hallo
>
> > Mein Konstrukt sieht derzeit wie folgt aus:
> >
> > ~~~css
> > table{
> > position:relative;
> > top:10em;
> > margin:0 auto;
> > background:red;
> > width:30%;
> > border-collapse:collapse;
> > table-layout:fixed;
> > }
> > ~~~
>
> Wovon berechnen sich die `width:30%` der Tabelle und wozu brauchst du `position:relative;`?
>
> > ~~~css
> > th, td{
> > width:25%;
> > border:1px solid black;
> > }
> >
> > th:nth-of-type(2), td:nth-of-type(2){
> > width:50%;
> > }
> > ~~~
> >
> > In diesem speziellen Fall sieht es recht passend aus. Wenn ich das ganze aber auf 8 Spalten erweitere passt es einfach nicht mehr. Oder kann das auch an der Border liegen und wenn ja, wie umgehe ich das?
>
> Das können wir ohne die Kenntnis des „echten“ Quelltextes a.k.a. Codes immer noch nicht sagen. Und ja, die Angaben zu `border` beeinflussen die Breiten. Das sollte aber unter Kenntnis des Codes zu nachvollziehbaren Verschiebungen (um die Breiten der border (hier jeweils 1px)) führen. Wenn da nicht noch andere Fallen, die du noch nicht offenbart hast, schlummern, könnte [`calc()`](https://wiki.selfhtml.org/wiki/Calc#Berechnungen_-_Die_calc-Funktion) einen Lösungsansatz bergen.
>
> Tschö, Auge
>
> --
> Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
> Wolfgang Schneidewind **\*prust\***