遨翔在知识的海洋里----css(表格各种表现形式)

html

1. 表格默认 靠左，有上下边框，无左右边框
2. 表格居中
3. 表格有上下左右边框
4. 不换行，超出隐藏，省略号

    <table class="app-tables border center">
        <thead>
            <tr>
                <th>试卷ID</th>
                <th style="width: 400px;">试卷标题</th>
                <th>考试类型</th>
                <th>考试时间</th>
                <th>科目</th>
                <th>考试分数</th>
                <th>班平均分</th>
                <th>班排名</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>2017年普通高等学校招生全国统一考试:入学考试2017年普通高等学校招生全国统一考试:入学考试</td>
                <td>入学考试</td>
                <td>2017-09-12</td>
                <td>数学</td>
                <td>80分</td>
                <td>70分</td>
                <td>第1名</td>
            </tr>
            <tr>
                <td>001</td>
                <td>2017年普通高等学校招生全国统一考试:入学考试2017年普通高等学校招生全国统一考试:入学考试</td>
                <td>入学考试</td>
                <td>2017-09-12</td>
                <td>数学</td>
                <td>80分</td>
                <td>70分</td>
                <td>第2名</td>
            </tr>
            <tr>
                <td>001</td>
                <td>2017年普通高等学校招生全国统一考试:入学考试2017年普通高等学校招生全国统一考试:入学考试</td>
                <td>入学考试</td>
                <td>2017-09-12</td>
                <td>数学</td>
                <td>80分</td>
                <td>70分</td>
                <td>第3名</td>
            </tr>
        </tbody>
    </table>
复制代码

css

/* 表格默认 靠左，有上下边框，无左右边框*/
table.app-tables{
    table-layout: fixed;
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
}
table.app-tables tr {
    display: table-row;
    height: 50px;
    box-sizing: border-box;
}
table.app-tables tr:hover{
    background-color: #fff5f5;
}
table.app-tables th {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    padding: 0 10px;
    background: #fff;
    box-sizing: border-box;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table.app-tables td {
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #e2e2e2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 表格修改居中 */
table.center th,
table.center td{
    text-align: center;
}

/* 表格修改有上下左右边框 */
table.border th,
table.border td{
    border: 1px solid #e2e2e2;
}

复制代码