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

を処理/スタイルする方法によってはdiv、ページのレンダリングが必ずしも高速になるとは限らず、セマンティックとアクセシビリティが低下するようです。代わりに、次のルールをスタイルシートに追加してみてください:

table { table-layout: fixed }

いくつかの欠点がありますが、おそらくはるかに高速にレンダリングされます。(また、s を使用する場合も同じ欠点に遭遇しdivます。繰り返しますが、それらを処理/スタイルする方法によって異なります。)

于 2012-10-10T12:25:04.250 に答える
1

CSSプロパティdisplay：tableおよびdisplay：table-rowおよびdisplay：table-columnを使用して、divタグのスタイルを設定し、テーブルのように表示されるように調整します

ただし、この投稿を確認してください。 <div>タグと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 に答える