1

我是 CSS 的新手，谁能帮我将 3 级 div 居中？问题是宽度未知，因为我使用的是 %. 我已经尝试过margin: auto;，但没有奏效。

而且我还面临着表格页眉和页脚的另一个问题。<hr>我已经尝试在其中放置一条带有代码的水平线<thead>，<tbody>但它们并没有像我希望的那样出现。我已经迷路了，请帮助我。

点击这里查看我当前在 jsbin 上的代码

<div style="overflow: auto; height: 100%;padding:1% 0% 0% 0.5%;margin:0 auto;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background: #E0E0E0 !important;border: 1px solid #808080;">
<div style="width:45%;margin: 0 1.5%;float:left;">
    <div style="width: 100%;text-align: right !important;white-space: nowrap;">
        <b>Select</b> &nbsp;
        <select name="department" id="department" class="required" style="margin-top:0.4%; margin-right: -4px; width: 70%;">
            <option class="options" value="">Please select</option>
                <option class="options" value="1">Option 1</option>
                <option class="options" value="2">Option 2</option>
                <option class="options" value="3">Option 3</option>
                <option class="options" value="4">Option 4</option>
                <option class="options" value="5">Option 5</option>
        </select>
    </div>
    <div style="margin-top: 10px !important;margin-bottom: -100px !important;height: 220px;width: 100%;background: #BFBABA !important;border-radius: 5px;border: 4px solid #BFBABA" >
        <div class="taskhead" style="margin-bottom: -90px !important;padding: 5px;background-color: #ccffff;height: 200px;margin: auto;border-radius: 5px;border: 1px solid #808080;">
            <div style="margin: 0px auto!important;padding: 5px;height: 180px; background: #ffffff !important;border: 1px solid #808080;border-radius: 5px;">
                <b>Name:</b>
                <div id="er_users" style="width: 100%;overflow: scroll; overflow-x: hidden; height: 160px; background: #ffffff !important;">
                    <table id="uid" style="width: 100%;margin-left: 5px; float: right;">
                        <thead style="background-color: #e0e0e0"><hr></thead>
                        <tbody>
                            <tr class="odd">
                                <td>Name 1</td>
                            </tr>
                            <tr class="even">
                                <td>Name 1</td>
                            </tr>
                            <tr class="odd">
                                <td>Name 2</td>
                            </tr>
                            <tr class="even">
                                <td>Name 2</td>
                            </tr>
                        </tbody>
                        <tfoot style="background-color: #e0e0e0"><hr></tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="margin: 0 1.5%; background-color: #D6D2D2 !important;width:0.2%;height: 265px !important;float:left;">&nbsp;<br/></div>
<div style="width:45%;margin: 0 1%;float:left;">
    <div style="margin-top: 1%"></div>
    <b>User</b>

    <div style="margin-top: 10px !important;margin-bottom: -100px !important;height: 220px;width: 100%;background: #BFBABA !important;border-radius: 5px;border: 4px solid #BFBABA;" >
        <div style="margin-bottom: -100px !important;padding: 5px;background-color: #e6f0a3;height: 200px;border-radius: 5px;border: 1px solid #808080;">
            <div style="margin: 0px auto!important;padding: 5px;height: 180px; background: #ffffff !important;border: 1px solid #808080;border-radius: 5px;">
                <b>Name:</b>
                <div style="width: 100%; overflow: scroll; overflow-x: hidden; height: 160px; background: #ffffff !important;">
                    <table id="uid" style="width: 100%;margin-left: 5px; float: right;">
                        <thead style="background-color: #e0e0e0"><hr></thead>
                        <tbody>
                            <tr class="odd">
                                <td>Name 1</td>
                            </tr>
                            <tr class="even">
                                <td>Name 1</td>
                            </tr>
                            <tr class="odd">
                                <td>Name 2</td>
                            </tr>
                            <tr class="even">
                                <td>Name 2</td>
                            </tr>
                        </tbody>
                        <tfoot style="background-color: #e0e0e0"><hr></tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的桌子应该看起来的样子

点击这里查看图片

4

1 回答 1

0

如果您在用户margin-top下方增加表格垂直对齐。15px

对于水平规则，tfoot在之前向上移动tbody，并hr用tr td

<thead><tr><td><hr/></td></tr></thead>
<tfoot><tr><td><hr/></td></tr></tfoot>

要将 扩展table至封闭div，请添加

height: 100%;

到table.

修改后的 JSBin

于 2013-01-29T11:28:52.677 回答