如何使用 Div 标签而不是表格 [重复]答案

【问题标题】：How to use Div tag instead of table [duplicate]如何使用 Div 标签而不是表格 [重复]
【发布时间】：2012-10-10 12:00:09
【问题描述】：

可能重复：
How create table only using <div> tag and Css

我的 jsp 页面中有一个包含 1000 条记录的表。在 IE-8 中执行制表符/输入操作时，浏览器响应缓慢。因此，我想用 div 标签更改所有表格标签，这可能会加快响应速度。

如何在 html 中将下表代码更改为 div 标签。

<div style="overflow: auto; height: 240px;">
                <TABLE BORDER=0 CELLSPACING=2 CELLPADDING=2 WIDTH="100%">
                    <TR>
                        <TD ALIGN="CENTER">
                            <TABLE BORDER=0 CELLSPACING=2 CELLPADDING=2>
                                <TR>
                                    <TH ALIGN="left" VALIGN=MIDDLE HEIGHT="20" BGCOLOR="#C0C0C0">
                                        <B>AAAAA</B>
                                    </TH>
                                    <TH ALIGN="left" VALIGN=MIDDLE HEIGHT="20" BGCOLOR="#C0C0C0">
                                        <B>BBBBBB</B>
                                    </TH>
                                    <TH ALIGN="left" VALIGN=MIDDLE HEIGHT="20" BGCOLOR="#C0C0C0">
                                        <B>CCCCC</B>
                                    </TH>
                                    <TH ALIGN="right" VALIGN=MIDDLE HEIGHT="20" BGCOLOR="#C0C0C0">
                                        <B>DDDDDD</B>
                                    </TH>
                                    <TH ALIGN="right" VALIGN=MIDDLE HEIGHT="20" BGCOLOR="#C0C0C0">
                                        <B>EEEEEEE</B>
                                    </TH>
                                    <TH ALIGN="right" VALIGN=MIDDLE HEIGHT="20" BGCOLOR="#C0C0C0">
                                        <B>${aaaaa}</B>
                                    </TH>
                                    <TH ALIGN="right" VALIGN=MIDDLE HEIGHT="20" BGCOLOR="#C0C0C0">
                                        <B>${bbbbb}</B>
                                    </TH>
                                    <TH ALIGN="right" VALIGN=MIDDLE HEIGHT="20" BGCOLOR="#C0C0C0">
                                        <B>Next</B>
                                    </TH>
                                    <TH ALIGN="right" VALIGN=MIDDLE HEIGHT="20" BGCOLOR="#C0C0C0">
                                        <B>Ready</B>
                                    </TH>
                                </TR>

                                <c:forEach items="${items}" var="item" varStatus="status">                              
                                    <TR>
                                        <TD ALIGN="right" width=120 VALIGN=MIDDLE HEIGHT="20">
                                            ${aaaaa}
                                        </TD>
                                        <TD ALIGN="right" VALIGN=MIDDLE HEIGHT="20">
                                            ${bbbbbb}
                                        </TD>
                                        <TD ALIGN="left" VALIGN=MIDDLE HEIGHT="20">
                                            ${cccccc}
                                        </TD>
                                        <TD BGCOLOR="gray" ALIGN="right" VALIGN=MIDDLE HEIGHT="20">
                                            <input type="text" NAME="total" SIZE="7" MAXLENGTH="7"
                                                VALUE="0">
                                        </TD>
                                        <TD ALIGN="right" VALIGN=MIDDLE HEIGHT="20">
                                            <input type="text" NAME="tbHd" SIZE="7"
                                                MAXLENGTH="7" VALUE="0">
                                        </TD>
                                        <TD ALIGN="right" VALIGN=MIDDLE HEIGHT="20">
                                            <input type="text" NAME="tbHd" SIZE="7"
                                                MAXLENGTH="7" VALUE="0">
                                        </TD>
                                        <TD ALIGN="right" VALIGN=MIDDLE HEIGHT="20">
                                            <input type="text" NAME="tbHd" SIZE="7"
                                                MAXLENGTH="7" VALUE="0">
                                        </TD>
                                        <TD ALIGN="right" VALIGN=MIDDLE HEIGHT="20">
                                            <input type="text" NAME="tbHd" SIZE="7"
                                                MAXLENGTH="7" VALUE="0">
                                        </TD>
                                        <TD ALIGN="right" VALIGN=MIDDLE HEIGHT="20">
                                            <input type="text" NAME="tbHd" SIZE="7"
                                                MAXLENGTH="7" VALUE="0">
                                        </TD>
                                    </TR>

                                </c:forEach>
                                <TR>
                                    <TD></TD>
                                    <TD></TD>
                                    <TD ALIGN="right" VALIGN=MIDDLE HEIGHT="20">
                                        <B>Total:</B>
                                    </TD>
                                    <TD ALIGN="right" VALIGN=MIDDLE HEIGHT="20">
                                        <input type="text" NAME="tbTotal" SIZE="7"
                                            MAXLENGTH="7" VALUE="0">
                                    </TD>
                                    <TD></TD>
                                    <TD></TD>
                                    <TD></TD>
                                    <TD></TD>
                                    <TD></TD>
                                    <TD></TD>
                                    <TD></TD>
                                    <TD></TD>
                                </TR>

                            </TABLE>
                        </td>
                    </tr>
                </table>
            </div>

【问题讨论】：

查看此帖stackoverflow.com/questions/3053205/…
我认为这需要大量的 CSS 来完成并且会很邪恶，无论如何这里是 JSbin -> jsbin.com/aveban/1/edit
表格用于数据，继续使用表格。
@Ran 可能会决定不支持 IE8？表格数据应始终在表格中。无论什么场合。
在这里同意@Rune。我不知道用 div 替换 table 会给你带来什么。特别是如果您呈现的是表格数据并且没有指示数据是什么。可能是您呈现的内容需要很长时间才能呈现。

标签： css html

【解决方案1】：

根据您对待/设置divs 的方式，您的页面不一定会渲染得更快，而且看起来它会使其语义和可访问性降低。相反，您可能想尝试将以下规则添加到您的样式表中：

table { table-layout: fixed }

它有一些缺点，但它可能会渲染得更快。（此外，在使用 divs 时，您会遇到同样的缺点；同样，这取决于您对待/设计它们的方式。）

【讨论】：

这应该是第一种方法，当涉及到缓慢的渲染时间。
我已经这样做了，但我仍然看到响应缓慢。

【解决方案2】：

使用 CSS 属性 display:table 和 display:table-row 和 display:table-column 设置 div 标签的样式并调整它们以显示为表格

但是看看这篇文章，它有一个例子 How create table only using <div> tag and Css

【讨论】：

【解决方案3】：

试试这个

<div style="float: left; width: 30px; height: 100%; background-color: green;">left</div>
<div style="float: right; width: 30px; height: 100%; background-color: blue;">right</div>
<div style="margin-left: 30px; margin-right: 30px; height: 100%; background-color: yellow;">Content!...</div>

演示http://jsfiddle.net/DrFhT/

【讨论】：