CSS表格

于 2024-09-28 15:21:40 发布
阅读量360 收藏 8
点赞数 5
分类专栏： CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_82561004/article/details/142616332
版权

在网页中我们通常使用表格来展示一些数据，例如成绩表、财务报表等，但是默认情况下表格的样式并不美观，甚至不符合页面的风格。CSS
中提供了一些属性，通过这些属性您可以修改表格的样式，大大改善表格的外观。

  • table-layout：设置表格的布局算法，布局算法有两种，分别为固定表格布局算法和自动表格布局算法；
  • border-collapse：设置表格中单元格的边框是合并在一起还是按照标准的 HTML 样式分开；
  • border-spacing：设置当表格边框分开时，相邻两个边框在横向和纵向上的间距；
  • caption-side：设置表格标题相对于表格的位置；
  • empty-cells：设置当表格的单元格中没有内容时，是否显示该单元格的边框。

1. table-layout

table-layout 属性用来设置表格布局时所用的布局算法，属性的可选值如下：

值描述
automatic默认值，自定表格布局，表示表格中每列的宽度视单元格中的内容而定
fixed固定表格布局，表示表格的宽度由列宽度、单元格边框、单元格之间的间距等因素而定
inherit从父元素继承 table-layout 属性的值
1) 固定表格布局

固定表格布局允许浏览器更快地对表格进行布局。在固定表格布局中，表格的水平宽度仅取决于列宽度、表格边框宽度、单元格间距等因素，与单元格中的内容无关。也就是说，表格中超出表格宽度的内容可能会被忽略。

2) 自动表格布局

在自动表格布局中，列的宽度视单元格中的内容（没有换行的最宽内容）而定，也就是说如果某个单元格的宽度为 100px，但单元格中内容所占据的宽度要大于
100px，这就会导致单元格中的内容将单元格撑大。正是因为这一特点，此种算法可能会比较慢。

2. border-collapse

border-collapse 属性用来设置是否合并表格中相邻的边框，属性的可选值如下：

值描述
separate默认值，相邻的两个边框是分开的，使用它不会忽略 border-spacing 和 empty-cells 属性
collapse相邻的两个边框会合并为一个单一的边框，使用它会忽略 border-spacing 和 empty-cells 属性
inherit从父元素继承 border-collapse 属性的值

【示例】通过 border-collapse 属性来合并或拆分单元格的边框：

<!DOCTYPE html>

<html>

<head>

    <style>

        table {

            float: left;

        }

        .table_one {

            border-collapse: separate;

        }

        .table_two {

            margin-left: 20px;

            border-collapse: collapse;

        }

    </style>

</head>

<body>

    <table class="table_one" border="1">

        <tr>

            <th>编号</th>

            <th>姓名</th>

            <th>年龄</th>

        </tr>

        <tr>

            <td>1</td>

            <td>张三</td>

            <td>15</td>

        </tr>

        <tr>

            <td>2</td>

            <td>李四</td>

            <td>11</td>

        </tr>

    </table>

    <table class="table_two" border="1px">

        <tr>

            <th>编号</th>

            <th>姓名</th>

            <th>年龄</th>

        </tr>

        <tr>

            <td>1</td>

            <td>张三</td>

            <td>15</td>

        </tr>

        <tr>

            <td>2</td>

            <td>李四</td>

            <td>11</td>

        </tr>

    </table>

</body>

</html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：border-collapse 属性演示

默认情况下表格的边框是隐藏的，所以上面示例中我们需要使用<table>标签的 border 属性来显示边框，另外，您也可以使用 CSS 的
border 属性来为表格设置边框，如下所示：

table, th, td {

    border: 1px solid black;

}

3. border-spacing

border-spacing 属性可以设置相邻单元格边框之间的距离（仅在 border-collapse 属性为 separate
时才有效），它的效果等同于<table>标签的 cellspacing 属性（即border-spacing:0;等同于 cellspacing="0"）。border-spacing 属性的语法格式如下：

border-spacing: length length;

参数 length 由数值和单位组成，表示相邻单元格边框之间的距离，其可选值如下：

值描述
length以数值加单位的形式设置相邻边框之间的间距，例如 2px，不允许使用负值。如果只定义一个 length 参数，那么这个值将同时作用于横向和纵向的间距；如果同时定义两个 length 参数，那么第一个 length 参数表示相邻边框的横向间距，第二个 length 参数表示相邻边框的纵向间距
inherit从父元素继承 border-spacing 属性的值

【示例】使用 border-spacing 属性设置表格中相邻边框的间距：

<!DOCTYPE html>

<html>

<head>

    <style>

        table {

            float: left;

        }

        .table_one {

            border-spacing: 15px 10px;

        }

        .table_two {

            margin-left: 20px;

            border-spacing: 20px;

        }

    </style>

</head>

<body>

    <table class="table_one" border="1">

        <tr>

            <th>编号</th>

            <th>姓名</th>

            <th>年龄</th>

        </tr>

        <tr>

            <td>1</td>

            <td>张三</td>

            <td>15</td>

        </tr>

        <tr>

            <td>2</td>

            <td>李四</td>

            <td>11</td>

        </tr>

    </table>

    <table class="table_two" border="1px">

        <tr>

            <th>编号</th>

            <th>姓名</th>

            <th>年龄</th>

        </tr>

        <tr>

            <td>1</td>

            <td>张三</td>

            <td>15</td>

        </tr>

        <tr>

            <td>2</td>

            <td>李四</td>

            <td>11</td>

        </tr>

    </table>

</body>

</html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：border-spacing 属性演示

4. caption-side

caption-side 属性可以设置表格标题的位置，属性的可选值如下：

值描述
top默认值，将表格标题定位在表格正上方
bottom将表格标题定位在表格正下方
inherit从父元素继承 caption-side 属性的值

【示例】使用 caption-side 属性设置表格标题的位置：

<!DOCTYPE html>

<html>

<head>

    <style>

        table {

            float: left;

        }

        .table_one {

            caption-side: top;

        }

        .table_two {

            margin-left: 20px;

            caption-side: bottom;

        }

    </style>

</head>

<body>

    <table class="table_one" border="1">

        <caption>表格标题</caption>

        <tr>

            <th>编号</th>

            <th>姓名</th>

            <th>年龄</th>

        </tr>

        <tr>

            <td>1</td>

            <td>张三</td>

            <td>15</td>

        </tr>

        <tr>

            <td>2</td>

            <td>李四</td>

            <td>11</td>

        </tr>

    </table>

    <table class="table_two" border="1px">

        <caption>表格标题</caption>

        <tr>

            <th>编号</th>

            <th>姓名</th>

            <th>年龄</th>

        </tr>

        <tr>

            <td>1</td>

            <td>张三</td>

            <td>15</td>

        </tr>

        <tr>

            <td>2</td>

            <td>李四</td>

            <td>11</td>

        </tr>

    </table>

</body>

</html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：caption-side 属性演示

5. empty-cells

empty-cells 属性用来设置当某个单元格中没有内容时，是否显示这个空单元格（仅在 border-collapse 属性为 separate
时才有效），属性的可选值如下：

值描述
hide隐藏空单元格周围的边框
show默认值，显示空单元格周围的边框
inherit从父元素继承 empty-cells 属性的值

【示例】使用 empty-cells 属性来设置是否隐藏空单元格;

<!DOCTYPE html>

<html>

<head>

    <style>

        table {

            float: left;

        }

        .table_one {

            empty-cells: hide;

        }

        .table_two {

            margin-left: 20px;

            empty-cells: show;

        }

    </style>

</head>

<body>

    <table class="table_one" border="1">

        <tr>

            <th>编号</th>

            <th>姓名</th>

            <th>年龄</th>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td>2</td>

            <td>李四</td>

            <td>11</td>

        </tr>

    </table>

    <table class="table_two" border="1px">

        <tr>

            <th>编号</th>

            <th>姓名</th>

            <th>年龄</th>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td>2</td>

            <td>李四</td>

            <td>11</td>

        </tr>

    </table>

</body>

</html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：empty-cells 属性演示

原文地址CSS表格

小白求学1
关注
专栏目录
CSS表格样式
xiangxiongfly
07-21 1万+
CSS表格样式 caption-side 标题位置 border-collapse 边框合并 border-spacing 边框间距 css样式（推荐使用）
CSS 表格
GarfieldEr007的专栏
12-09 1729
CSS 表格属性可以帮助您极大地改善表格的外观。 表格边框 如需在 CSS 中设置表格边框，请使用 border 属性。 下面的例子为 table、th 以及 td 设置了蓝色边框： table, th, td { border: 1px solid blue; } 亲自试一试 请注意，上例中的表格具有双线条边框。这是由于 table、th 以
前端必知必会-CSS表格table
qq_24018193的博客
08-18 1017
本文介绍了的CSS 表格使用，如有问题欢迎私信和评论。
css表格梅花,html表格美化css
weixin_29628637的博客
08-03 716
分享三种笔者常用的html表格美化css：(效果如上图)表格美化/* reset */html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,...
表格自适应 css,css 表格自适应一些方法总结
weixin_29483167的博客
08-04 1624
css中表格自适应有很多解决办法，一种就是直接使用css定义div，另一种是使用js与jquery来实现，希望此教程对各位同学会有所帮助。目前有很多智能的表格自适应解决方案。他们分别是 flip the table on it’s side, convert it to a pie chart, gradually reduce the columns, allow users to determ...
css表格排序,纯CSS实现表格排序-利用CSS 变量和Flexbox
weixin_31256263的博客
08-04 897
1.引子今天闲逛知名前端资讯站Front-End Front，发现一个比较有意思的效果，给大家分享下，希望可以对大家有所启发。纯CSS实现表格排序心急的同学，先看效果，我放在codepen上。本案例用到了以下知识点：CSS变量Flexbox布局grid布局(非必须，可以替代)因此，本案例只在现代浏览器中运行良好。2.核心原理我们利用Flexbox的方式打破表格布局，让表格做Flex容器(conta...
CSS表格隔行变色
qq_43843936的博客
07-03 890
1、奇数行加颜色 table tr:nth-child(odd){ background: #ccc; } 2、偶数行加颜色 table tr:nth-child(even){ background: #ccc; }
CSS表格和设置表格样式
qq_45902025的博客
02-28 1893
CSS表格和表格设置样式
CSS 表格：Table
梁辰兴的博客
09-19 3108
CSS折叠边框是一种用于实现边框缩小或扩张的CSS技巧，主要通过设置边框的宽度和高度，使边框在需要缩小或扩张时根据实际需要进行折叠。请注意，这只是一种模拟折叠边框的方法，实际的折叠边框效果可能需要使用其他技术或者配合其他属性来实现。如果单元格中的内容超出了单元格的宽度或高度，可以使用CSS的溢出处理方式来处理，例如使用。同时，在表格内部，单元格之间的边框是默认不显示的，如果需要显示，需要给单元格也设置。需要注意的是，对于表格的行高或单元格宽度，可以通过设置单元格的。CSS 表格属性可以用来改变表格的样式。
CSS表格样式1
05-27
由于描述中没有提供具体信息，我将根据常见的CSS表格样式实践进行详细讲解。 首先，我们来了解一下HTML表格的基本结构，由`<table>`、`<tr>`（行）、`<th>`（表头）和`<td>`（单元格）元素组成。CSS可以帮助我们...
css表格单元格中的长文本如何实现自动换行
12-13
下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 复制代码代码如下: ”wrap”>正常文字的换行...
CSS表格斜线.rar
07-05
标题“CSS表格斜线.rar”和描述“CSS表格斜线”暗示了这个压缩包内容主要涉及如何使用CSS来实现带有斜线的表格效果。在网页设计中，有时我们需要创建具有特殊布局的表格，例如带有分区的单元格，其中包含斜线以指示...
CSS 表格样式
03-18
在实际项目中，可以结合`myhome`这个压缩包中的源码来进一步学习和实践这些CSS表格样式的应用。通过不断试验和调整，你可以创造出独特且符合项目需求的表格样式。记得保持代码的简洁和可读性，这将对后期维护...
Vue中集中常见的布局方式
张雨的博客
09-24 396
【代码】Vue中集中常见的布局方式。
CSS05-复合选择器
最新发布
qq_31532983的博客
09-24 209
后代选择器、子类选择器、并集选择器、伪类选择器（链接伪类、focus伪类）
CSS04-Chrome调试工具
qq_31532983的博客
09-24 237
Chrome调试工具
面经 | css
YuuuPeeiiiii的博客
09-24 721
flex:1是felx:1 1 0的简写，是flex-grow:1;flex-basis:0的简写；掌握熟悉上面的一两种写下就行了。父元素是非static元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值