Tabellen-Layout (Spalten im Header) anpassen, aber wie?

ignoOre · 31 Mai 2015

Hallo liebe Gemeinde,
ich stecke ein wenig fest und erbitte Hilfe!

Ich baue eine Kreuztabelle und möchte das die Schrift in der ersten Zeile um 90° gegen den Uhrzeigersinn gedreht dargestellt wird. Ich habe das drehen soweit auch hinbekommen, komme allerdings bei der Positionierung der Elemente nicht wirklich sinnvoll zu einer Lösung! Ich habe gemerkt, dass ich über absolute Positionierung zu einer Lösung kommen würde, möchte das allerdings vermeiden und bei relativer Positionierung bleiben (sofern möglich?).
Das Problem ist, dass der <div><span>... </span></div> Bereich der ersten Zeile sich irgendwo im Raum befindet, nur nicht da wo er hin soll.

Ich würde mich riesig über Lösungsvorschläge freuen und hoffe auch, dass mir vllt. jmd noch schnell erklären kann warum das bei mir mit der Positionierung nicht klappt!

HTML:

<body>

    <table id="test_table" class="all_crosstable">
    <caption style="caption-side:bottom;text-align:left;border:none;background:none;margin:0;padding:0;">
    </caption>
   
        <tbody class="row-hover">
       
        <tr class="row-1 odd">
            <td class="column-1"><div><span></span></div></td>
            <td class="column-2"><div><span>Spalte 1</span></div></td>
            <td class="column-3"><div><span>Spalte 2</span></div></td>
            <td class="column-4"><div><span>Spalte 3</span></div></td>
            <td class="column-5"><div><span>Spalte 4</span></div></td>
            <td class="column-6"><div><span>Spalte 5</span></div></td>
            <td class="column-7"><div><span>Spalte 6</span></div></td>
            <td class="column-8"><div><span>Spalte 7</span></div></td>
            <td class="column-9"><div><span>Spalte 8</span></div></td>
            <td class="column-10"><div><span>Spalte 9</span></div></td>
            <td class="column-11"><div><span>Spalte 10</span></div></td>
            <td class="column-12"><div><span>Spalte 11</span></div></td>
            <td class="column-13"><div><span>Spalte 12</span></div></td>
            <td class="column-14"><div><span>Spalte 13</span></div></td>
            <td class="column-15"><div><span>Spalte 14</span></div></td>
            <td class="column-16"><div><span>Spalte 15</span></div></td>
            <td class="column-17"><div><span>Spalte 16</span></div></td>
            <td class="column-18"><div><span>Spalte 17</span></div></td>
            <td class="column-19"><div><span>...</span></div></td>
        </tr>
       
        <tr class="row-2 even">
            <td class="column-1">Zeile 1</td>
            <td class="column-2">5</td>
            <td class="column-3">28</td>
            <td class="column-4">32</td>
            <td class="column-5">12</td>
            <td class="column-6">2</td>
            <td class="column-7">20</td>
            <td class="column-8">4</td>
            <td class="column-9">8</td>
            <td class="column-10">16</td>
            <td class="column-11">18</td>
            <td class="column-12">22</td>
            <td class="column-13">24</td>
            <td class="column-14">26</td>
            <td class="column-15">30</td>
            <td class="column-16">14</td>
            <td class="column-17">6</td>
            <td class="column-18">10</td>
            <td class="column-19">34</td>
        </tr>
       
        <tr class="row-3 odd">
            <td class="column-1">Zeile 2</td>
            <td class="column-2">43</td>
            <td class="column-3">7</td>
            <td class="column-4">32</td>
            <td class="column-5">12</td>
            <td class="column-6">2</td>
            <td class="column-7">20</td>
            <td class="column-8">4</td>
            <td class="column-9">8</td>
            <td class="column-10">16</td>
            <td class="column-11">18</td>
            <td class="column-12">22</td>
            <td class="column-13">24</td>
            <td class="column-14">26</td>
            <td class="column-15">30</td>
            <td class="column-16">14</td>
            <td class="column-17">6</td>
            <td class="column-18">10</td>
            <td class="column-19">34</td>
        </tr>
       
        </tbody>
   
    </table>

</body>

Code:

    body {
        background-color:yellow;}
       
    table {
        white-space:nowrap;
        margin:auto;
        background-color:white;
        border:none;
        table-layout:fixed;
        border-collapse:collapse;
        border:solid 1px red;
        text-align:center;}
       
    table.all_crosstable tr td {
        height:25px;
        min-height:25px;
        width: 25px;
        min-width: 25px;
        max-width: 25px;
        border-collapse:collapse;
        border:solid 1px green;
        white-space:nowrap;}
       
    .all_crosstable tr.row-1 td {
        height: 200px;
        width: 25px;
        min-width: 25px;
        max-width: 25px;
        vertical-align: bottom;
        padding: 0;
        font-size: 16px;
        background-color:#222222;}
       
    .all_crosstable tr td.column-1 {
        width:200px;
        min-width:200px;
        max-width:200px;}

    .all_crosstable tr.row-1 td:nth-child(n+2) > div{
        width: 200px;
        min-width: 198px;
        max-width: 198px;
        height:26px;
        min-height:26px;
        padding:0;
        margin:0;
        background-color:transprent;
        color:blue;
        border-collapse:collapse;
        border:solid 1px red;
       
        transform: rotate(-90deg) scale(1) skew(0deg) translate(0px);
        -webkit-transform: rotate(-90deg) scale(1) skew(0deg) translate(0px);
        -moz-transform: rotate(-90deg) scale(1) skew(0deg) translate(0px);
        -o-transform: rotate(-90deg) scale(1) skew(0deg) translate(0px);
        -ms-transform: rotate(-90deg) scale(1) skew(0deg) translate(0px);}
         
    .all_crosstable tr.row-1 td div > span {
        padding:0;
        height: 200px;
        min-height:200px;
        width: 25px;
        min-width: 25px;
        max-width: 25px;
        display:block;}

Ein GROßES Danke im Voraus

ignoOre · 3 Juni 2015

Schade das mir hier niemand helfen konnte. Der Lösungsansatz sieht wie folgt aus:

HTML:

    .all_crosstable tr.row-1 td:nth-child(n+2) > div{
        width: 25px;
        min-height: 198px;
        height: 26px;
        padding: 0;
        margin: 0;
        background-color: transprent;
        color: blue;
        border-collapse: collapse;
        border: solid 1px red;}
         
    .all_crosstable tr.row-1 td div > span {
        padding:0;
        height: 200px;
        min-height:200px;
        width: 25px;
        min-width: 25px;
        max-width: 25px;
        display:block;
        transform-origin: 0 0; /* den drehpunkt auf oben links festlegen */
        transform: rotate(-90deg) translateX(-196px);/* 196px ist die height (200px) - border (1px x 2 = 2px) - toleranz (2px) */}

djheke · 3 Juni 2015

Na bitte, Lesen hilft. Das gilt aber auch für deine Tabelle. Wenn tbody dann komplett (Pflicht) thead tfoot tbody > achte auf diese Reihenfolge.

Code:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tabelle</title>
<style>
table {
white-space:nowrap;
margin:auto;
background-color:white;
table-layout:fixed;
border-collapse:collapse;
border:solid 1px red;
text-align:center;
/*empty-cells:hide;*/
}
  
th {
width:150px;
border:solid 1px green;
}

thead {
height:200px;
background:#000;
color:#fff;
}

thead td {
border:1px solid red;
transform: rotate(-90deg) translate(-80px, 0px);
}


td {
height:25px;
min-height:25px;
width: 25px;
min-width: 25px;
max-width: 25px;
border:solid 1px green;
}
</style>
</head>

<body>  
<table>
  <caption>Kreuztabelle</caption>
  <thead>  
  <tr>
  <td></td>
  <td>Spalte 1</td>
  <td>Spalte 2</td>
  <td>Spalte 3</td>
  <td>Spalte 4</td>
  <td>Spalte 5</td>
  <td>Spalte 6</td>
  <td>Spalte 7</td>
  <td>Spalte 8</td>
  <td>Spalte 9</td>
  <td>Spalte 10</td>
  <td>Spalte 11</td>
  <td>Spalte 12</td>
  <td>Spalte 13</td>
  <td>Spalte 14</td>
  <td>Spalte 15</td>
  <td>Spalte 16</td>
  <td>Spalte 17</td>
  <td>Spalte 18</td>
  </tr>
  </thead>
<tfoot>
  <tr>
  <th colspan="19">Tabelle</th>
  </tr>
</tfoot>
<tbody>
  <tr>
  <th>Zeile 1</th>
  <td>5</td>
  <td>28</td>
  <td>32</td>
  <td>12</td>
  <td>2</td>
  <td>20</td>
  <td>4</td>
  <td>8</td>
  <td>16</td>
  <td>18</td>
  <td>22</td>
  <td>24</td>
  <td>26</td>
  <td>30</td>
  <td>14</td>
  <td>6</td>
  <td>10</td>
  <td>34</td>
  </tr>
   <tr>
  <th>Zeile 2</th>
  <td>43</td>
  <td>7</td>
  <td>32</td>
  <td>12</td>
  <td>2</td>
  <td>20</td>
  <td>4</td>
  <td>8</td>
  <td>16</td>
  <td>18</td>
  <td>22</td>
  <td>24</td>
  <td>26</td>
  <td>30</td>
  <td>14</td>
  <td>6</td>
  <td>10</td>
  <td>34</td>
  </tr>
  </tbody> 
  </table>
</body>
</html>

ignoOre · 16 Juni 2015

Hallo,
danke für die Antwort.

Ich hoffe jedoch, dass du mit "Lesen hilft" nicht andeuten möchtest, ich hätte mich vorher nicht versucht selbstständig einzulesen und schlau zu machen. Damit würdest du nämlich 110% daneben liegen.
Und das thead und tfoot nicht aufgeführt werden, ist gewollt.

Aber vielen Dank für die Hilfe!

MrMurphy · 16 Juni 2015

Hallo,

nur mal zur Info

Wenn tbody dann komplett (Pflicht) thead tfoot tbody > achte auf diese Reihenfolge.

Seit HTML5 darf der tfoot auch nach tbody stehen.

Gruss

MrMurphy

djheke · 16 Juni 2015

MrMurphy schrieb:
Hallo,

nur mal zur Info

Seit HTML5 darf der tfoot auch nach tbody stehen.

Gruss

MrMurphy

Danke für den Hinweis. Habe ich nicht gewusst.Danke.

Tabellen-Layout (Spalten im Header) anpassen, aber wie?

ignoOre

Neues Mitglied

ignoOre

Neues Mitglied

djheke

Aktives Mitglied

ignoOre

Neues Mitglied

MrMurphy

Senior HTML'ler

djheke

Aktives Mitglied

Neueste Beiträge