Question

您好我继承了一个包含以下代码的搜索窗口的JavaScript应用程序。

我希望文本“统计搜索”显示在统计信息标签和复选框上方。然后，在右侧，我希望其他3行显示在另一行的顶部，并在顶部显示“Estimates Search”。这可能与当前表pTable有关吗？我不想删除表，因为它链接到许多其他文件。

我尝试添加一个宽度为50％的新div，但现在确实有效。谢谢你的帮助。

CSS

.pPane {
    float: right;
    clear: right;
    margin-left: 5px;
}
.ptable
{
    float:left;
    margin-top:10px;
}
.pBottom 
{
    float: left;
    clear: both;
    width: 100%;
}

HTML

<div id="pPane" class="pPane">
    <div id="pBottom" class="pBottom">
        <table id="pTable" class="ptable">
            <tr><td colspan="9"><span id="sSearch" style="color:black; font-size:12px; text-decoration:underline;">Statistics Search 
                          </span></td></tr>
            <tr><td colspan="9"><label>Statistics</label></td><td><input id="1" type="checkbox" /></td></tr>
            <tr><td colspan="9"><span id="eSearch" style="color:black; font-size:12px; text-decoration:underline;">Estimates Search</span></td></tr>
            <tr><td colspan="9"><label>Estimate 1</label></td><td><input id="2" type="checkbox" /></td></tr>
            <tr><td colspan="9"><label>Estimate 2</label></td><td><input id="3" type="checkbox" /></td></tr>
            <tr><td colspan="9"><label>Estimate 3</label></td><td><input id="4" type="checkbox" /></td></tr>
        </table>
    </div>
</div>

Answer 1

这样的东西？

http://jsfiddle.net/GHC7T/3/

我认为你可以用Divs和CSS做得更好，但这很快。使用这样的表不是最佳实践。

<div id="pPane" class="pPane">
<div id="pBottom" class="pBottom">
    <table>
        <tr>
            <td>
                <table id="pTable" class="ptable">
                    <tr>
                        <td colspan="9">
                            <span id="sSearch" style="color:black; font-size:12px; text-decoration:underline;">
                                Statistics Search
                            </span>
                        </td>
                    </tr>
                    <tr><td colspan="9"><label>Statistics</label></td><td><input id="1" type="checkbox" /></td></tr>
                </table>
            </td>
            <td>

                <table>


                    <tr><td colspan="9"><span id="eSearch" style="color:black; font-size:12px; text-decoration:underline;">Estimates Search</span></td></tr>
                    <tr><td colspan="9"><label>Estimate 1</label></td><td><input id="2" type="checkbox" /></td></tr>
                    <tr><td colspan="9"><label>Estimate 2</label></td><td><input id="3" type="checkbox" /></td></tr>
                    <tr><td colspan="9"><label>Estimate 3</label></td><td><input id="4" type="checkbox" /></td></tr>
                </table>
            </td>
        </tr>
    </table>
</div>

或者你可以尝试这个http://jsfiddle.net/LDJ2X/3/

<div id="pPane" class="pPane">
<div id="pBottom" class="pBottom">
    <table id="pTable" class="ptable">
        <tr>
            <td>
        <tr>
            <td colspan="2">
                <span id="sSearch" style="color:black; font-size:12px; text-decoration:underline;">
                    Statistics Search
                </span>
            </td>
            <td colspan="2"><span id="eSearch" style="color:black; font-size:12px; text-decoration:underline;">Estimates Search</span></td>
        </tr>
        <tr rowspan="3">
            <td>
                <label>Statistics</label>
            </td>
            <td><input id="1" type="checkbox" /></td>
            <td><label>Estimate 1</label></td>
            <td><input id="2" type="checkbox" /></td>
        </tr>
        <tr></tr>
        <tr>
            <td colspan="2" />
            <td><label>Estimate 2</label></td>
            <td><input id="3" type="checkbox" /></td>
        </tr>
        <tr><td colspan="2" /><td><label>Estimate 3</label></td><td><input id="4" type="checkbox" /></td></tr>
        </td>
        </tr>
    </table>
</div>

表css中的2列

1 个答案: