轻松解决HTML + CSS各种表格问题

最新推荐文章于 2024-03-05 19:30:22 发布

shenmill

最新推荐文章于 2024-03-05 19:30:22 发布

阅读量9.5k

点赞数 4

分类专栏： css布局 html 文章标签： css html

本文链接：https://blog.csdn.net/shenmill/article/details/52145029

版权

css布局同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

项目中数据大多以表格形式呈现，这也就要求我们能够做出各式各样的表格，以前不太用表格，用的话也只是简单的形式，所以在第一次做表格的时候简直大写的懵逼，后来在网上学习了之后再加上自己的理解写了这篇博客，能够轻松解决表格问题，希望大家指点。

1. HTML中的表格

在HTML中，table元素中往往包含一个完整的表格，简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。复杂的表格还由其他内容组成，分别是thead,tbody,tfoot,caption等，从字面意思很容易理解为表头，表体，表底，caption表示标题。如果不加这些元素，直接在table里写tr td等代码在浏览器渲染过程中会自己加上tbody标签，默认为全部为表体内容。有时候为了css代码简便常常th用td代替，下面我给出的例子都只用td。

2.表格几个比较常用的属性

border-collapse与 border-spacing
前者是为表格设置合并边框模型，后者是设置相邻单元格的边框间的距离，具体是什么意思呢？下面我给出例子：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
    table {
    border-collapse: collapse;
    border-spacing: 0;
}
    table thead tr th{
        font-weight: bold;
        background-color: #8EB4E3;
    }
    table td,table th{
        height: 20px;
        border:1px solid #A6A6A6;
        font-size: 14px;
        text-align: center;
    }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>排名</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小李</td>
                <td>99</td>
                <td>1</td>
            </tr>
            <tr>
                <td>小王</td>
                <td>96</td>
                <td>2</td>
            </tr>
            <tr>
                <td>小张</td>
                <td>92</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

样式为：
这里写图片描述
没错，是最简单的样式，如果把border-collapse去掉就会变成这样：

是因为td之间的边框线重叠了。如果把两个都去掉就会变成这样：

所以要么两个都写上，要么只写一个 border-collapse: collapse;否则会出问题的。
* rowspan与colspan
从字面看就是合并单元格的意思，表格有很大的变化性，但是怎么能好好掌握它呢？哈哈，我给大家讲一波。首先要看清这两个属性，一个是对行一个是对列，这两个元素是针对td来说的，来看看这个表格。
这里写图片描述
其中a，b，c占了两行，d跨了五列，e，f各跨四列，代码这样写：

<thead>
            <tr>
                <td rowspan="2">a</td>
                <td rowspan="2">b</td>
                <td rowspan="2">c</td>
                <td colspan="5">d</td>
                <td colspan="4">e</td>
                <td colspan="4">f</td>
            </tr>
            <tr>
                <td>g</td>
                <td>h</td>
                <td>i</td>
                <td>j</td>
                <td>k</td>
                <td>l</td>
                <td>m</td>
                <td>n</td>
                <td>o</td>
                <td>p</td>
                <td>q</td>
                <td>r</td>
                <td>s</td>
            </tr>
        </thead>

对于这种复杂的样式应该遵守一个从上到下从左到右的顺序，先写a，b，c，这三个没有什么太大的问题，下来写d，然后下来写什么呢，应该按行从左到右，对于连行的属性下一行横跨行的样式就不用再重复了。

3.其他表格样式

1.高度太高标题固定

这里写图片描述
css代码：

  table{
        width: 100%;
        border-collapse: collapse;
    }
    table tbody{
        display:block;
        height:300px;
        overflow-y:scroll;
    }
    table td{
        border:1px solid #A6A6A6;
        height: 23px;
        text-align: center;
        font-size: 12px;
    }
    table thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
    }
    table thead {
        width: calc( 100% - 1.05em );
        font-weight: bold;
        background-color: #8EB4E3;
    }

tbody必须设置为一个块元素，因为它是一个块的形式运动的，必须设置高度也就是视觉看到的呈现出来的高度，并且超出部分以滚动条的形式呈现，这一点是非常重要的。虽然tbody是个块但是里面的tr相对tbody来说还是以表格的形式，thead里面的元素也需要这样操作。有一个属性： table-layout:fixed;意思是列宽由表格宽度和列宽度设定，即是自适应的，如果去掉的话会发现是这样的效果：
这里写图片描述
但是加上之后还是会与下面的内容有所偏差，这就需要用 width: calc( 100% - 1.05em );这句来帮忙啦，1.05em是不断测试试出来的，calc适用于流体布局，用于设置宽之类的，不用考虑元素的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

2.宽度太宽横向滚动条

这里写图片描述

这里写图片描述
代码：

table_grid{
    overflow: scroll;
}
table{
    width: 200%;
}

因为要把table当作一个整体，所以需要给table的父元素设置一个属性（table_grid）overflow: scroll;，table的宽度要设置得大一点，这个道理很简单。

最近进度太慢，都在忙着做项目，我得抓紧学后台了，加油啊！！！

shenmill

关注

4
点赞
踩
29

收藏

觉得还不错? 一键收藏
1
评论
轻松解决HTML + CSS各种表格问题

表格那些事：简单复杂的表格样式，高度固定表头固定，横向滚动条等。
复制链接

扫一扫

专栏目录