Tabelle in div umwandeln - css

Question

Hier ist meine Tabelle und wie würde ich in divs konvertieren

<table class="style1">
            <tr>
                <td class="style2">Name</td>
                <td class="style5">John Doe</td>
                <td>error</td>
            </tr>
            <tr>
                <td class="style2">
                    Desc</td>
                <td class="style5">
                    Desc....</td>
            </tr>
            <tr>
                <td class="style3">
                    Start Date</td>
                <td class="style4">
                    date here</td>
                    <td>start date error here</td>
            </tr>
            <tr>
                <td class="style2">
                    End Date</td>
                <td class="style5">
                    end date here....</td>
                    <td>end date error..</td>
            </tr>
          </table>

Answer 1

CSS ermöglicht eine einfache Tabellensimulation mit Blockelementen unter Verwendung der display Eigentum.

HTML:

<div class="table style1">
    <div class="tr">
        <div class="td style2">
            Name
        </div>
        <div class="td style5">
            John Doe
        </div>
        <div class="td">
            error
        </div>
    </div>
    <div class="tr">
        <div class="td style2">
            Desc
        </div>
        <div class="td style5">
            Desc....
        </div>
        <div class="td style5">
            Desc....
        </div>
    </div>
    <div class="tr">
        <div class="td style3">
            Start Date
        </div>
        <div class="td style4">
            date here
        </div>
        <div class="td">
            start date error here
        </div>
    </div>
    <div class="tr">
        <div class="td style2">
            End Date
        </div>
        <div class="td style5">
            end date here....
        </div>
        <div class="td">
            end date error..
        </div>
    </div>
</div>

CSS:

.table {
    display:table;
}
.tr {
    display:table-row;
}
.td {
    display:table-cell;
}

Answer 2

Wenn Sie solche Daten anzeigen, ist es am besten, eine Tabelle zu verwenden. <div> sind für ein allgemeineres Layout besser geeignet als Tabellen, aber in diesem Fall müssten Sie css in jedem <div> statt der Verwendung von einfachen <table> , <tr> y <td> Elemente, um das Styling beizubehalten.

Answer 3

<style>
   .style2{
float:left;    
}
.clr{
clear:both;
}
</style>

<div class="style1">
            <div class="clr">
                <div class="style2">Name</div>
                <div class="style5">John Doe</div>
            </div>
            <div class="clr">
                <div class="style2">
                    Desc</div>
                <div class="style5">
                    Desc....</div>
            </div>
            <div class="clr">
                <div class="style2">
                    Start Date</div>
                <div class="style4">
                    date here</div>
                    <div>start date error here</div>
            </div>
            <div class="clr">
                <div class="style2">
                    End Date</div>
                <div class="style5">
                    end date here....</div>
                    <div>end date error..</div>
            </div>
  </div>

Ich hoffe, das hilft.

Answer 4

Semantisch gesehen sind Ihre Daten tabellarisch, was bedeutet, dass eine <table> ist am besten anstelle einer <div> . <div> für die generische Struktur verwendet werden. Sie sollten aber immer einen semantischen Code anstreben.

Wenn der Inhalt z.B. ein Absatz ist, dann verwenden Sie <p> . Wenn Sie eine Liste haben, dann verwenden Sie eine Liste - ungeordnet oder geordnet usw..

Answer 5

Ich weiß, dies ist ein altes Thema, aber ich bin hier gelandet, und vielleicht kommen auch andere hierher. Ich habe die Technik von AlienWebGuy verwendet, um eine Tabelle mit <div>' s mit der Eigenschaft display gestaltet. Dadurch wurde ein ärgerliches Problem mit der vertikalen Ausrichtung behoben, das ich mit einer Tabelle hatte, die Folgendes enthielt <td> Elemente, die ihrerseits eine unterschiedliche Anzahl von Zeilen enthielten.