0

可能重复：
如何仅使用 <div> 标签和 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>
4

3 回答 3

2

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

table { table-layout: fixed }

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

于 2012-10-10T12:25:04.250 回答
1

使用 CSS 属性 display:table 和 display:table-row 和 display:table-column 设置 div 标签的样式并调整它们以使其看起来像一个表格

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

于 2012-10-10T12:06:42.920 回答
0

尝试这个

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

于 2012-10-10T12:04:02.693 回答