css设置表格样式

最新推荐文章于 2024-06-13 01:26:35 发布
最新推荐文章于 2024-06-13 01:26:35 发布
阅读量1.8w 收藏 65
点赞数 7
分类专栏： CSS 文章标签： css设置表格样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40135955/article/details/89162444
版权

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置表格的边框</title>
<style type="text/css">
    .t{
        border: 1px gray solid;
        border-spacing: 0px;
        border-collapse: collapse;
    }
    
    .t td{
        border: 1px gray solid;
        padding: 5px;
    }
    
    .t th{
        border: 1px gray solid;
        padding: 5px;
    }
</style>
</head>
<body>
    <table class="t">
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>001</td>
                <td>魏安复</td>
                <td>男</td>
                <td>2012-12-12</td>
            </tr>
            <tr>
                <th>2</th>
                <td>002</td>
                <td>杜子腾</td>
                <td>女</td>
                <td>2011-11-11</td>
            </tr>
            <tr>
                <th>3</th>
                <td>003</td>
                <td>史珍湘</td>
                <td>女</td>
                <td>2010-10-10</td>
            </tr>
            <tr>
                <th>4</th>
                <td>004</td>
                <td>梅读</td>
                <td>女</td>
                <td>2009-10-10</td>
            </tr>
            <tr>
                <th>5</th>
                <td>005</td>
                <td>赖月金</td>
                <td>男</td>
                <td>2008-01-01</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总计</th>
                <th colspan="4">5条数据</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

 

不设置任何样式的效果图

 

 

加上  .t{
        border: 1px gray solid;
      
    }
    
    .t td{
        border: 1px gray solid;
       
    }
    
    .t th{
        border: 1px gray solid;
       
    }

 

效果图：

默认分离：

 .t{
        border: 1px gray solid;
        border-spacing: 0px;
        border-collapse: separate;//默认就是分离的
    }
    
    .t td{
        border: 1px gray solid;
     
    }
    
    .t th{
        border: 1px gray solid;
      
    }

 

 

 

.t{
        border: 1px gray solid;
        border-spacing: 0px;//单元格间距为0px
        border-collapse: collapse;//=改为合并
    }
    
    .t td{
        border: 1px gray solid;
     
    }
    
    .t th{
        border: 1px gray solid;
      
    }

效果图：单元格之间的线只有1根了，变细了

修改成下面的代码

.t td{
        border: 1px gray solid;
        padding: 5px;
    }
    
    .t th{
        border: 1px gray solid;
        padding: 5px;
    }

效果图

 

表格宽度是自动的，如果其中单元格内容很长，会自动变宽，不受设置的表格宽度限制

 

    .t{
        border: 1px gray solid;
        border-spacing: 0px;
        border-collapse: collapse;
        width: 500px;
        table-layout: fixed;//设置这个属性，表格长度固定了
    }

加上下面的代码（设置表格列样式）

//设置学号这一列

th+td{
        text-align: center;
    }
    

//设置性别这一列
    th+td+td+td{
        text-align: center;
        background-color: red;
    }

 

 

 

 

java对象999
关注
  • 7
    点赞
  • 踩
  • 65
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿Word自动套用格式使用CSS设置表格样式实例
12-03
通过这种方式，我们可以使用CSS精确地模拟Word中的表格样式，让网页中的表格同样具有丰富的视觉效果和专业感。这种技巧在构建复杂、美观的数据展示页面时非常有用，使得用户在网页中也能体验到与Word文档类似的功能...
CSS表格样式1
05-27
由于描述中没有提供具体信息，我将根据常见的CSS表格样式实践进行详细讲解。 首先，我们来了解一下HTML表格的基本结构，由`<table>`、`<tr>`（行）、`<th>`（表头）和`<td>`（单元格）元素组成。CSS可以帮助我们...
CSS设置表格样式
代码改变生活
06-15 1897
//设置表格带边框线                     类别             学校             服务范围         //设置自动居中对齐    margin:0 auto; //设置table行合并   rowspan="8" //设置table列合并   colspan="7"
CSS入门到精通——表格样式
最新发布
m0_73614626的博客
06-13 740
在实际情况中，我们可以根据需求设置表格对齐方式。设置表格中文字对齐的方式，与设置段落文字对齐的方式相同，都是使用。表格颜色设置十分简便，与设置文字颜色的方式相同。设置表格样式，使表格更优美。同样的，设置表格文字粗细与设置段落文字粗细相同，都是使用。设置表格样式，使表格更好看。设置表格样式，使表格更好看。但是，这样设置的通讯录表格有双边框。表格才会看起来更符合我们平时使用的表格。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。
CSS：设置表格样式
Thumb_的博客
12-11 2906
设置前： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格样式</title> </head> <body> <table> <tr> <th>名称</th> <th>职.
如何使用 CSS 设置 HTML 表格样式
allway2的博客
05-30 1万+
在 Web 开发的早期，HTML 表格非常基础，缺乏广泛的样式选项。然而，今天，大多数表格的样式都旨在为用户创造更美观和更实用的体验。 CSS 为样式表提供了许多属性。这些属性允许您（除其他外）分隔表格中的单元格、指定表格边框以及指定表格的宽度和高度。 本教程将通过示例讨论如何使用 CSS 设置表格样式。在本教程结束时，您将成为这方面的专家。 HTML 表格 HTML 代码定义了表格的结构。您使用 <table> 标记来定义表格。<tr>、<th> 和 <t
CSS表格和设置表格样式
qq_45902025的博客
02-28 1866
CSS表格和表格设置样式
CSS复习之用CSS设置表格样式
Java学习之乐的博客
05-12 1666
今日目录：        1、设置表格的边框        2、设置表格的宽度        3、设置表格隔行还色        4、设置表格列样式        5、设置鼠标经过时变色效果一、设置表格的边框Border：设置表格边框；Border-collapse：设置边框分离，合并 默认是 separate(分离) collapse 合并；Border-spacing ：设置单元格的间距；Pa...
CSS表格样式
xiangxiongfly
07-21 1万+
CSS表格样式 caption-side 标题位置 border-collapse 边框合并 border-spacing 边框间距 css样式（推荐使用）
CSS3表格和表单样式
码说芯语的博客
10-31 4661
表格和表单样式
css设置表格样式的方法
学习也休闲
11-24 1265
表格常见的应用   表格的颜色   例如   .datalist { color: #0046a6; background-color: #d2e8ff; font-family: Arial; } .datalist th { color: #003e7e; background-color: #7bb3ff;
html纯css实现表格样式
01-04
本教程将深入探讨如何使用纯 CSS 实现美观且功能丰富的表格样式。 表格在 HTML 中通常使用 `<table>`、`<tr>`（行）、`<th>`（表头）和 `<td>`（单元格）等标签来创建。CSS 则通过选择器和属性来控制表格的样式。...
CSS控制表格文字样式的研究
12-12
即使在DIV满天飞的今天，Table在网页的布局中还是少不了的，因为当需要输出数据时，Table布局远远比DIV布局有优势，而且同样的我们可以通过CSS来控制表格样式。要知道WEB标准并非是通篇的DIV CSS，而是倡导采用更...
CSS实现的清爽、漂亮的表格样式分享
01-19
效果： 实现代码： 复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<head><... charset=gb2312″ />...CSS实现的清爽、漂亮的表格样式 – jb5t1.net</tit
css设置超链接样式和css设置列表样式
热门推荐
qq_40135955的博客
04-09 2万+
<style type="text/css"> a:LINK { color: red; text-decoration: none; } a:VISITED { color: green; text-decoration: none; } a:HOVE...
CSS 设置背景颜色和背景图像
qq_40135955的博客
04-09 2143
第一节：设置背景颜色 <body style="background-color: blue;"> <h1 style="background-color: red;">这是一个神奇的标题</h1> 第二节：设置背景图像 <body style="background-image: url(../grid.jpg)"> &l...
css高级特性（“交集”， “并集”选择器， “后代”选择器，“子”选择器 ，继承特性 ，层叠特性）
qq_40135955的博客
06-11 1600
第一节：复合选择器 1.1 “交集”选择器 1.2 “并集”选择器 1.3 “后代”选择器 1.4 “子”选择器 交集选择器 比如： <p class="c">交集</p> 即是p标签,class="c"也满足 效果：交集这个文字变红 样式：p.c{ color:red; } 并集选择器（中间用逗号隔开） 效果：大哥和小...
css设置表格样式不显示
06-03
有可能是你的 CSS 设置不正确或者没有被正确地引用。以下是一些可能出现问题的地方： 1. 检查 CSS 文件是否被正确引用，可以在浏览器的开发者工具中查看。 2. 检查 CSS 中是否有语法错误，可以使用在线 CSS 验证器进行检查。 3. 确保你的 CSS 选择器与 HTML 中的标签匹配。 4. 有可能是其他 CSS 样式优先级更高导致你设置的样式被覆盖，可以使用浏览器开发者工具查看。 5. 如果你使用的是继承属性，可以检查父元素是否设置了相应的样式。 6. 如果你使用了外部 CSS 文件，检查文件路径是否正确。 如果你检查了以上所有可能出现问题的地方，还是无法解决问题，可以提供更多的信息，让我更好地帮助你解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值