Konvertieren Sie HTML Tabellenzeilenspanne zu CSS

Ich überprüfte einige der Beiträge hier in Bezug auf die Konvertierung von HTML-Tabelle zu CSS, kann aber nicht finden, was ich suche und hoffe auf etwas Hilfe.Konvertieren Sie HTML Tabellenzeilenspanne zu CSS

Ich verwende eine Tabelle als eine grafische Darstellung einiger Schließfächer, die verschiedene Größen haben. Daher überspannen einige Tabellenzellen mehrere Zeilen. Alles war in Ordnung, wenn es ein paar statische Modelle gab. Jetzt muss ich mich mit dynamischen Konfigurationen beschäftigen und Tabellen sind nur ein Schmerz, also versuche ich, es in CSS zu konvertieren.

Ich habe Probleme, wenn sich die Zelle über mehrere Zeilen erstreckt und nicht sicher ist, wie das CSS eingerichtet wird. Ich muss statisch sehen, wie es gemacht wird, bevor ich versuche, den Code dynamisch zu generieren.

Hier ist eine kurze Probe:

<table> 
 
    <tr> 
 
     <td id="Td7" rowspan="4" height="100">R0C0</td> 
 
     <td id="Td8" height="25" >R0C1</td> 
 
     <td id="Td9" height="25" >R0C2</td> 
 
    </tr> 
 
    <tr> 
 
     <td id="Td10" height="25" >R1C1</td> 
 
     <td id="Td11" height="25" >R1C2</td> 
 
    </tr> 
 
    <tr> 
 
     <td id="Td12" height="25" >R2C1</td> 
 
     <td id="Td13" height="25" >R2C2</td> 
 
    </tr> 
 
    <tr> 
 
     <td id="Td14" height="25" >R3C1</td> 
 
     <td id="Td15" height="25" >R3C2</td> 
 
    </tr> 
 
</table>

CSS (Versuch), kann die erste Reihe bekommen, aber nicht sicher, wie der Rest zu tun:

<div> 
 
    <span style="display:inline-block;width:100px;height:100px;border:solid 1px black;vertical-align:top;">R0C0</span> 
 
    <span style="display:inline-block;width:100px;height:25px;border:solid 1px black;vertical-align:top;">R0C1</span> 
 
    <span style="display:inline-block;width:100px;height:25px;border:solid 1px black;vertical-align:top;">R0C2</span> 
 
</div>

versuchte auch css "Tabelle", den Code in einem der Pfosten mit here:

<style type="text/css"> 
    .css-table { 
     display: table; 
     background-color:#ccc; 
     width: 350px; 
    } 
.css-table-tr { 
    display: table-row;  
} 

.css-table-td_small { 
    display: table-cell; 
    border:1px solid black; 
    width: 100px; 
    height:25px; 
    display:inline-blok; 
    text-align:center; 
    vertical-align:top; 
} 

.css-table-td_medium { 
    display: table-cell; 
    border:1px solid black; 
    width: 100px; 
    height:50px; 
    display:inline-blok; 
    text-align:center; 
    vertical-align:top; 
} 

.css-table-td_large { 
    display: table-cell; 
    border:1px solid black; 
    width: 100px; 
    height:100px; 
    display:inline-blok; 
    text-align:center; 
    vertical-align:top; 
} 

.css-table-td_kiosk { 
    display: table-cell; 
    border:1px solid black; 
    width: 100px; 
    height:150px; 
    display:inline-blok; 
    text-align:center; 
    vertical-align:top; 
} 
</style> 
<div class="css-table"> 
    <div class="css-table-tr"> 
     <span class="css-table-td_kiosk">R0C0</span> 
     <span class="css-table-td_small">R0C1</span> 
     <span class="css-table-td_small">R0C2</span> 
    </div> 
</div>

Edit:

Dies ist die (Probe) Tabelle Ich brauche ich zu konvertieren. Die Position und Größe von Schließfächern ändert sich je nach Modell. Wenn ich herausfinden kann, wie ein Modell mit CSS aussehen würde, kann ich es ausarbeiten, um es dynamisch zu machen. L, M und S in Klammern bedeuten Schließfachgröße. Medium ist 2 mal klein, groß ist 4 mal klein und Kiosk ist 6 mal klein.

<table border="1" style="width:600px"> 
    <tr> 
     <td id="Td1" height="100" >K01D04 (L)</td> 
     <td id="Td2" height="100" >C02D08 (L)</td> 
     <td id="Td3" height="100" >C03D08 (L)</td> 
    </tr> 
    <tr> 
     <td id="Td4" height="25" >K01D03 (S)</td> 
     <td id="Td5" height="25" >C02D07 (S)</td> 
     <td id="Td6" height="25" >C03D07 (S)</td> 
    </tr> 
    <tr> 
     <td id="Td7" rowspan="5" height="150" class="kPL_Kiosk">KIOSK</td> 
     <td id="Td8" height="25" >C02D06 (S)</td> 
     <td id="Td9" height="25" >C03D06(S)</td> 
    </tr> 
    <tr> 
     <td id="Td10" height="25" >C02D05 (S)</td> 
     <td id="Td11" height="25" >C03D05 (S)</td> 
    </tr> 
    <tr> 
     <td id="Td12" height="25" >C02D04 (S)</td> 
     <td id="Td13" height="25" >C03D04 (S)</td> 
    </tr> 
    <tr> 
     <td id="Td14" height="25" >C02D03 (S)</td> 
     <td id="Td15" height="25" >C03D03 (S)</td> 
    </tr> 
    <tr> 
     <td id="Td16" height="50" >C02D02 (M)</td> 
     <td id="Td17" height="50" >C03D02 (M)</td> 
    </tr> 
    <tr> 
     <td id="Td18" height="50" >K01D02 (M)</td> 
     <td id="Td19" rowspan="2" height="100" >C02D01 (L)</td> 
     <td id="Td20" rowspan="2" height="100" >C03D01 (L)</td> 
    </tr> 
    <tr> 
     <td id="Td21" height="50">K01D01 (M)</td> 
    </tr> 
</table>

Danke.

Edit 2:

Das Bild unten zeigt, was ich (eine Abweichung) angezeigt werden müssen. L: großes Schließfach, Höhe 100 px, M: mittel, Höhe 50 px; S: klein; Höhe 25 px. Allerdings scheint es mir nicht möglich zu sein, die Schließfächer spaltenweise anzuzeigen, obwohl ich die Flex-Richtung spalte: column.

bearbeiten 3:

Dies ist die CSS und HTML ich verwende. Nachdem ich die Breite und Höhe der Flex-Richtung hinzugefügt hatte, wurden die Bilder spaltenweise angezeigt. Ich denke, das ist eine undokumentierte Anforderung. Jetzt wird jedoch alles in der Spalte angezeigt. Das ist, was ich habe:

.lockers { 
    display: flex; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    -webkit-flex-wrap:wrap; 
    flex-wrap:wrap; 
    -webkit-justify-content: space-around; 
    justify-content: space-around; 
    align-items: flex-start; 
} 

.locker-column { 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
    -webkit-flex-wrap:wrap; 
    flex-wrap:wrap; 
    -webkit-align-items: flex-start; 
    align-items: flex-start; 
    height:420px; 
    width:100px; 
} 
img { 
    display: flex; 
    max-width: 100px; 
    height: auto; 
    -webkit-flex-grow:1; 
    flex-grow:1; 
    } 

<div class="lockers"> 
    <div class="locker-column"> 
     <img src="..\assets\images\Lockers\L.png" title="R1C1-L" /> 
     <img src="..\assets\images\Lockers\S.png" title="R2C1-S" /> 
     <img src="..\assets\images\Lockers\Kiosk.png" title="Kiosk" /> 
     <img src="..\assets\images\Lockers\M.png" title="R4C1-M" /> 
     <img src="..\assets\images\Lockers\M.png" title="R5C1-M" /> 
    </div> 
    <div class="locker-column"> 
     <img src="..\assets\images\Lockers\L.png" title="R1C2-L" /> 
     <img src="..\assets\images\Lockers\S.png" title="R2C2-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R2C3-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R2C4-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R2C5-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R2C6-S" /> 
     <img src="..\assets\images\Lockers\M.png" title="R2C7-M" /> 
     <img src="..\assets\images\Lockers\L.png" title="R2C8-L" /> 
    </div> 
    <div class="locker-column"> 
     <img src="..\assets\images\Lockers\L.png" title="R1C3-L" /> 
     <img src="..\assets\images\Lockers\S.png" title="R2C3-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R3C3-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R4C3-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R5C3-S" /> 
     <img src="..\assets\images\Lockers\S.png" title="R6C3-S" /> 
     <img src="..\assets\images\Lockers\M.png" title="R7C3-M" /> 
     <img src="..\assets\images\Lockers\L.png" title="R8C3-L" /> 
    </div> 
</div>

bearbeiten 4:

Quelle

2016-07-21 NoBullMan

Es gibt tatsächlich eine 'Anzeige: table' Ich denke, wenn Sie auf, dass einige der Forschung tun, wäre es höchstwahrscheinlich Ihr Problem zu lösen – Huangism

Es gibt keine CSS-Tabellenzeile Spanne – LGSon

ich die bearbeitete Frage, um die Anzeige zu schließen: Tabelle hatte ich bereits ausprobiert. – NoBullMan

Verwenden Sie Anzeige nicht: Tabelle. Ist das wonach Sie suchen?

Edit: Ausarbeitung

Ich glaube nicht, dass Sie das Konzept sind zu erfassen ..

werde ich versuchen, Ihnen zu erklären, wie Sie sollten darüber nachdenken. Normalerweise denken Sie bei Tabellen an Zeilen, wo dies bei Flexboxen der Fall sein könnte. Als ich meine Lösung schrieb, dachte ich darüber nach.

Beachten Sie, wie ich flex-Richtung: Spalte auf die Kinder von Schließfächern haben? Dieses div überspannt buchstäblich die gesamte Spalte von oben nach unten. Sie können tun, was immer Sie wollen, legen Sie die Schließfächer, die Sie wollen, in welcher Größe auch immer.

Wenn Sie noch keine Erfahrung mit Flexboxen haben, empfehle ich Ihnen, sich darüber zu informieren, aber die folgende Lösung gibt Ihnen eine grundlegende Grundlage für das, was Sie versuchen zu tun.

This tutorial ist ein guter Ausgangspunkt.

.lockers { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: flex-start; 
 
} 
 

 
.locker-column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: stretch; 
 
    width: 100px; 
 
} 
 
.locker { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    font-size: 22px; 
 
    text-decoration: underline; 
 
    font-weight: 600; 
 
    text-transform: uppercase; 
 
    margin: 2px 0; 
 
    height: 100%; 
 
} 
 

 
.large { 
 
    background-color: yellow; 
 
    color: red; 
 
    height: 100px; 
 
} 
 

 
.small { 
 
    background-color: navy; 
 
    color: white; 
 
    height: 25px; 
 
} 
 

 
.medium { 
 
    background-color: green; 
 
    color: red; 
 
    height: 50px; 
 
} 
 

 
.kiosk { 
 
    color: red; 
 
    text-decoration: none; 
 
    text-transform: lowercase; 
 
    height: 150px; 
 
}

<div class="lockers"> 
 
    <div class="locker-column"> 
 
    <div class="large locker">L11</div> 
 
    <div class="small locker">S21</div> 
 
    <div class="kiosk locker">Kiosk</div> 
 
    <div class="medium locker">M81</div> 
 
    <div class="medium locker">M91</div> 
 
    </div> 
 
    <div class="locker-column"> 
 
    <div class="large locker">L12</div> 
 
    <div class="small locker">S22</div> 
 
    <div class="small locker">S32</div> 
 
    <div class="small locker">S42</div> 
 
    <div class="small locker">S52</div> 
 
    <div class="small locker">S62</div> 
 
    <div class="medium locker">M72</div> 
 
    <div class="large locker">M82</div> 
 
    </div> 
 
    <div class="locker-column"> 
 
    <div class="large locker">L13</div> 
 
    <div class="small locker">S23</div> 
 
    <div class="small locker">S33</div> 
 
    <div class="small locker">S43</div> 
 
    <div class="small locker">S53</div> 
 
    <div class="small locker">S63</div> 
 
    <div class="medium locker">M73</div> 
 
    <div class="large locker">M83</div> 
 
    </div> 
 
</div>

Quelle

2016-07-21 19:12:08 zsawaf

Danke. Dies klingt vielversprechend, da, wenn ein Benutzer ein bestimmtes Schließfachsystem auswählt (möglicherweise unterschiedliche Anzahl von Schließfach- und Schließfachgrößenkonfigurationen), jede Schließfachspalte in einer separaten Datentabelle innerhalb eines Datensatzes gespeichert wird (Daten aus der Datenbank gelesen).Wenn dies das tut, wonach ich suche, sollte ich in der Lage sein, den Code ähnlich wie bei Ihrem Beispiel im laufenden Betrieb zu generieren. Ich werde Sie wissen lassen, wie es geht, sobald ich Flexboxen gelesen habe. – NoBullMan

Ich lese es und probiere es aus und es sieht gut aus. Die einzige Frage ist, dass die Flex-Direction-Spalte Elemente nicht spaltenweise anzeigt (oder mir etwas fehlt). Ich habe Ihren Bildern einen "title = x" (x = 1, 2, 3, ...) hinzugefügt und es scheint, dass sie in Reihen angezeigt werden. Ich habe verschiedene Variationen ausprobiert und das Gleiche erreicht. – NoBullMan

Ich habe ein Bild von dem, was ich suche, hinzugefügt. Ich kann die verdammten Schließfächer nicht spaltenweise anzeigen. Ihr Beispiel fügt auch Bilder in einer Reihe und nicht Spalte hinzu (siehe vorheriger Kommentar) – NoBullMan

Konvertieren Sie HTML Tabellenzeilenspanne zu CSS

Antwort

Verwandte Themen