-1

我有一个带有 HTML 表格的 CSS 代码。表格没有出现在页面中心的问题。
我正在使用浮动来扩展左侧栏，我添加的更多表格将发生在左侧栏上。

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

3 回答 3

0

它缺少一些关闭标签

</div>

看看这个http://jsfiddle.net/E8jd3/62/我也解决了你的左列问题，如果你想用动态表取所有高度，不要使用浮点数。在另一个问题https://stackoverflow.com/a/19413508/2887133中解决了它。

于 2013-10-17T21:41:57.757 回答
0

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

.center2 { 
    text-align: center;
}

参考这里：使用 CSS 或 HTML 的表格居中

于 2013-10-17T21:05:48.557 回答
0

如果我的想法正确，则需要<div class="col2">将container2.

这是编辑过的小提琴： 小提琴

于 2013-10-17T21:07:04.710 回答