phpstudy集成环境

 首页 > html的固定表头，thead和tbody不对齐，如何解决呢？

html的固定表头，thead和tbody不对齐，如何解决呢？

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>one page</title>
    <style>

        .fixedThead {
            display: block;
        }

        .scrollTbody {
            display: block;
            height: 262px;
            overflow: auto;
            width: 100%;
        }

        .table td, .table th {
            width: 200px;
            border-bottom: none;
            border-left: none;
            border-right: 1px solid #CCC;
            border-top: 1px solid #DDD;
            word-break: keep-all;
            white-space: nowrap;
        }

        .table tr {
            border-left: 1px solid #EB8;
            border-bottom: 1px solid #B74;
        }


    </style>
</head>
<body ng-controller="StudentsCtl">


<div align="center">学生成绩浏览表</div>

<div id="shop_top">
    <div class="form-group" id="shop_filter">
        过滤：<input type="text" class="form-control" ng-model="filter.$" placeholder="filter">
    </div>
</div>
<table class="table table-hover table-bordered" si-table>
    <thead class="fixedThead">
    <tr>
        <th ng-click="predicate='id'; reverse=!reverse">序号</th>
        <th ng-click="predicate='examNo'; reverse=!reverse">准考证号</th>
        <th ng-click="predicate='name'; reverse=!reverse">姓名</th>
        <th ng-click="predicate='schoolName'; reverse=!reverse">学校</th>
        <th ng-click="predicate='chinese'; reverse=!reverse">语文</th>
        <th ng-click="predicate='math'; reverse=!reverse">数学</th>
        <th ng-click="predicate='physics'; reverse=!reverse">物理</th>
        <th ng-click="predicate='chemistry'; reverse=!reverse">化学</th>
        <th ng-click="predicate='biology'; reverse=!reverse">生物</th>
        <th ng-click="predicate='politis'; reverse=!reverse">政治</th>
        <th ng-click="predicate='history'; reverse=!reverse">历史</th>
        <th ng-click="predicate='geography'; reverse=!reverse">地理</th>
        <th ng-click="predicate='englishHear'; reverse=!reverse">听力</th>
        <th ng-click="predicate='english'; reverse=!reverse">英语</th>
        <th ng-click="predicate='totalScore'; reverse=!reverse">总分</th>
    </tr>
    </thead>
    <tbody class="scrollTbody">
    <tr ng-repeat="i in stus | filter:filter|orderBy:predicate:reverse">
        <td>{{$index+1}}</td>
        <td>{{ i.examNo }}</td>
        <td>{{ i.name }}</td>
        <td>{{ i.schoolName }}</td>
        <td>{{ i.chinese }}</td>
        <td>{{ i.math }}</td>
        <td>{{ i.physics }}</td>
        <td>{{ i.chemistry }}</td>
        <td>{{ i.biology }}</td>
        <td>{{ i.politis }}</td>
        <td>{{ i.history }}</td>
        <td>{{ i.geography }}</td>
        <td>{{ i.englishHear }}</td>
        <td>{{ i.english }}</td>
        <td>{{ i.totalScore }}</td>


    </tr>
    </tbody>
</table>
<!-- 分页部件  -->
<div class="pager">
    <span>数据库一共有{{totalItems}}条记录</span><span style="margin-left: 30px">  一共有：{{pageCount}}页</span>
    <span style="margin-left: 20px">当前为第：{{currentPage}}页</span>
    <br>
    <pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" first-text="首页"
           next-text="下一页" prev-text="上一页" last-text="尾页" show-goto="true" goto-text="跳转到"></pager>
</div>

</body>
</html>

效果：

给表头的列设定成定宽就好了。
*<table>

<colgroup >
    <col width="40%"/>
    <col width="30%"/>
    <col width="15%"/>
    <col width="15%"/>
</colgroup>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr>

</table>*
另外表头没有滚动条，但是body有滚动条，所以还会有点小偏差。所以在表头最后加一列占位，大概17px，用来抵消滚动条的宽度。

设置准考证和学校这两个字段宽度，其他可以自适应，滚动条可以模拟一个，不用浏览器自带

滚动条的宽度导致你表格和表头不能够对齐

<style>
    .head{
        width: 500px;
        border-right: 1px solid #dddddd;
        overflow: hidden;
    }

    .head span{
        float: left;
        display: inline-block;
        width: 99px;
        height: 30px;
        line-height: 30px;
        border-left: 1px solid #dddddd;
        border-top: 1px solid #dddddd;
        text-align: center;
    }

    .body{
        width: 501px;
        height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .body table{
        width: 501px;
        border-right: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        border-spacing: 0;
        border-collapse: collapse;
        text-align: center;
    }

    .body td{
        padding: 10px 0;
        border-left: 1px solid #dddddd;
        border-top: 1px solid #dddddd;
    }

    .body td.has-width{
        width: 99px;
    }

</style>
<div class="head">
    <span>1</span>
    <span>1</span>
    <span>1</span>
    <span>1</span>
    <span>1</span>
</div>
<div class="body">
    <table>
        <tbody>
        <tr>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td>1</td>
        </tr>
        <tr>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td>1</td>
        </tr>
        <tr>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td>1</td>
        </tr>
        <tr>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td>1</td>
        </tr>
        <tr>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td>1</td>
        </tr>
        <tr>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td>1</td>
        </tr>
        <tr>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td class="has-width">1</td>
            <td>1</td>
        </tr>
        </tbody>
    </table>
</div>

不要给tbody和thead改display，单独写一个div用于thead，然后在table外面套个div，设置其overflow-y:auto，最后表格的最后一列不要设置宽度，这样可以关联收缩

【热门文章】
【热门文章】