Question

我有一个带有HTML表格的CSS代码。表格的问题不在于页面的中心。
我正在使用 float 展开左侧栏，更多表我添加更多扩展将发生在左侧栏。

http://jsfiddle.net/hadinetcat/E8jd3/39/

我的CSS代码：

.container2 {
    float: left;
    width: 15%;
    background: #FFA500;
    position: relative;
    right: -0%;
    overflow: auto;
}

.col1 {
    float: left;
    width: 26%;
    position: relative;
    left: 20%;
    overflow: hidden;
    height: 570px;
    bottom: -60px;
    overflow: hidden;

.col2 {
    float: left;
    width: 75%;
    background: #fff;
}


.footer {
    border: 1px solid orange;
    position: relative;
    padding: 0px;
    margin-top: -5px;
    font-size: 15px;
}

我的HTML代码：

<div id="header" style="background-color:#FFA500;">
    <h1 style="margin-bottom:0;">Wellcome To Balhalfe Services Customer Reports</h1>
</div>
<div class="container2 ">
    <div class="col1">
        lililililili<br />
    </div>
    <div class="col2">
        <div align="center">
            <H2 align="center">
            Report Table</H>
        </div>
        <table border="1" align="center"class="tableClass">
            <tr>
                <td><b>Name</b></td>
                <td><b>Mime</b></td>
                <td><b>Size (bytes)</b></td>
                <td><b>Created</b></td>
                <td><b>Download</b></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>eu contres.txt</td>
                <td>text/plain</td>
                <td>546</td>
                <td>2013-08-22 00:06:55</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=4&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
            <tr>
                <td>1594(HA 10 AL HAALY).pdf</td>
                <td>application/pdf</td>
                <td>60964</td>
                <td>2013-08-29 23:40:07</td>
                <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
            </tr>
        </table>
    </div>
</div>
<div class="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    Copyright © balhalfe services 20103-2014
</div>

Answer 1

尝试使用此CSS代码在表格周围粘贴div：

.center2 { 
    text-align: center;
}

参考此处：Table centering using CSS or HTML

Answer 2

如果我的想法是正确的，您需要将<div class="col2">放在container2之外。

这是编辑过的小提琴： Fiddle

Answer 3

它遗漏了一些来自

的关闭标签

</div>

Chek this http://jsfiddle.net/E8jd3/62/我也解决了你的左列问题，如果你想用动态表占据所有高度，不要使用float。它是在另一个问题https://stackoverflow.com/a/19413508/2887133中解决的。

CSS表不在页面中心

3 个答案: