将表格转换为div - CSS

Question

将表格转换为div - CSS

4

这是我的表格，我应该如何将其转换为

元素

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

- Nick Kahn

5个回答

2

如果您要显示类似的数据，最好使用表格。对于更一般的布局，建议使用

而不是表格，但在这种情况下，您需要在每个

中应用CSS，而不是使用普通的，和

元素来保持样式。

- squinlan

1

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

希望这有所帮助。

- Benny Tjia

什么是style2、style4和style5？ - Nick Kahn

不用担心样式4和5，你需要做的是使它们与样式2相匹配。只需关注样式2，将它们浮动出来即可。 - Benny Tjia

0

从语义上讲，您的数据是表格形式的，这意味着最好使用 <table> 而不是 <div>。 <div> 用于通用结构。但是，您应该始终努力编写语义化的代码。

例如，如果内容是段落，则使用 <p>。如果您有一个列表，请使用无序或有序列表等列表。

- Michel Hébert

0

我知道这是一个旧的帖子，但我最终来到了这里，其他人也可能会走这条路。我使用AlienWebGuy的技术，用显示属性样式化的

替换了一个表格。这样做解决了我在包含元素的表格中遇到的令人发狂的垂直对齐问题，而这些元素又包含不同数量的行。

- user3399334

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AlienWebguy · Accepted Answer

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