Question

可能重复：
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>

Answer 1

根据您对div处理/样式的方式，您的页面不一定呈现得更快，并且看起来它会降低语义和可访问性。相反，您可能想尝试将以下规则添加到样式表中：

table { table-layout: fixed }

它有一些缺点，但它可能会提高很多。（另外，使用div时会遇到同样的缺点;再次，取决于你对它们进行处理/设计的方式。）

Answer 2

使用CSS proprites display：table和display：table-row和display：table-column来设置div标签的样式，并将它们调整为像表格一样

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

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

如何使用Div标签代替表格

3 个答案: