Css 对中嵌套div和表格标题设计_Css

Css 对中嵌套div和表格标题设计

css

Css 对中嵌套div和表格标题设计,css,Css,说到CSS，我是个新手，有人能帮我把三级div放在中间吗？问题是宽度是未知的，因为我使用的是%。我已经试过margin:auto；但是没有起作用我还面临着另一个关于表格页眉和页脚的问题。我已经试过了一个水平行，代码在and中，但它们没有按我希望的方式显示。我已经迷路了，请帮帮我我的桌子应该是这样的如果将用户下方的页边距顶部增加到15px，则表格将垂直对齐对于水平规则，将tfoot向上移动到tbody之前，并用tr td包裹hr 坐到桌子上修改后的感谢您花时间回答我的问题@Olaf D

说到CSS，我是个新手，有人能帮我把三级div放在中间吗？问题是宽度是未知的，因为我使用的是%。我已经试过margin:auto；但是没有起作用

我还面临着另一个关于表格页眉和页脚的问题。我已经试过了一个水平行，代码在and中，但它们没有按我希望的方式显示。我已经迷路了，请帮帮我

我的桌子应该是这样的

如果将用户下方的页边距顶部增加到15px，则表格将垂直对齐

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

坐到桌子上

修改后的

感谢您花时间回答我的问题@Olaf Dietsche，但遗憾的是，您提出的解决方案不是我正在寻求的解决方案。@达斯，那么您应该澄清一下，到底是什么不符合您的预期。@达斯，您可以这样做，但它看起来不像您的形象。请看更新的答案。我的错。正如您所提到的，我将边框置于顶部：3px实心E0；边框底部：封闭div上的3px实心E0，但水平规则应位于内部，并且是边框的一部分。我试着把它放在那个里，但并没有显示水平线。@Darth我也试过，但我看不出怎么做。看起来，所有的行，包括头和脚，都必须是相同的高度。

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

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

height: 100%;