Question

对于CSS来说，我是一个新手，任何人都可以帮助我集中三级div吗？事情是宽度未知，因为我使用％。我已经尝试margin: auto;但是没有用。

我还面临着表头和页脚的另一个问题。我已经尝试过了 <hr>和<thead>中包含<tbody>代码的水平线，但它们没有出现我想要的等待。我已经迷路了，请帮帮我。

Click here to view my current code on 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>

这就是我的表格看起来像

的样子

Click here to view the image

Answer 1

如果您将用户下的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

使嵌套的div和表头设计居中

1 个答案: