将表转换为div - css

Question

这是我的表,我将如何转换为div

<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允许使用display属性使用块元素轻松进行表模拟.

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;
}