Question

这是我的表格，我将如何转换为divs

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

Answer 2

如果您正在显示这样的数据，最好使用表格。对于更一般的布局，建议使用<div>而不是表格，但在这种情况下，您必须在每个<div>中应用css，而不是使用普通<table>，<tr>和<{1}}元素用于维护样式。

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>

希望有所帮助。

Answer 4

从语义上讲，您的数据是表格式的，这意味着<table>最好不是<div>。 <div>将用于通用结构。但是你应该总是争取语义代码。

e.g。如果内容是段落，则使用<p>。如果你有一个列表，那么使用一个列表 - 无序或有序等。

Answer 5

我知道这是一个老话题，但是我在这里结束了，其他人也可能会这样。我使用AlienWebGuy的技术来替换使用display属性设置<div>'样式的表。这样做解决了一个令人抓狂的垂直对齐问题，我遇到了一个包含<td>元素的表，而这些元素又包含不同数量的行。

将表转换为div - css

5 个答案: