`

css表格样式

    博客分类：
  • Css
css 
阅读更多
1. css表格样式 

<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 class="even"><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 class="even"><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>


1) 设置表格的边框 

border：设置表格边框；
border-collapse：设置边框分离，合并默认是separate(分离)collapse合并；
border-spacing：设置单元格的间距；
padding：设置单元格内容和边框之间的距离；

<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>


2) 设置表格的宽度 

table-layout
默认auto自动方式，根据单元格的内容自动调整宽度；
fixed固定方式表格宽度固定；

<style type="text/css">
    .t{
        border: 1px gray solid;
        border-spacing: 0px;
        border-collapse: collapse;
        width: 500px;
        table-layout: fixed;
    }
    .t td{
        border: 1px gray solid;
        padding: 5px;
    }
    .t th{
        border: 1px gray solid;
        padding: 5px;
    }
</style>


3) 设置表格隔行换色 

tbody tr.even{background-color: #AAA;}

<style type="text/css">
    .t{
        border: 1px gray solid;
        border-spacing: 0px;
        border-collapse: collapse;
        width: 500px;
        table-layout: fixed;
    }
    .t tr{ background-color: #CCC; }
    .t td{
        border: 1px gray solid;
        padding: 5px;
    }
    .t th{
        border: 1px gray solid;
        padding: 5px;
    }
    tbody tr.even{ background-color: #AAA; }
</style>


4) 设置表格列样式，使用连接选择器 

th+td{text-align: center;}
th+td+td+td{text-align: center;background-color: red;}

<style type="text/css">
    .t{
        border: 1px gray solid;
        border-spacing: 0px;
        border-collapse: collapse;
        width: 500px;
        table-layout: fixed;
    }
    .t tr{
        background-color: #CCC;
    }
    .t td{
        border: 1px gray solid;
        padding: 5px;
    }
    .t th{
        border: 1px gray solid;
        padding: 5px;
    }
    tbody tr.even{ background-color: #AAA; }
    th+td{ text-align: center; }
    th+td+td+td{
        text-align: center;
        background-color: red;
    }
</style>


5) 设置鼠标经过时行变色效果 

tbody tr:HOVER {background-color: aqua;}

<style type="text/css">
    .t{
        border: 1px gray solid;
        border-spacing: 0px;
        border-collapse: collapse;
        width: 500px;
        table-layout: fixed;
    }
    .t caption{ font-size: 24px; }
    .t tr{ background-color: #CCC; }
    .t td{
        border: 1px gray solid;
        padding: 5px;
    }
    .t th{
        border: 1px gray solid;
        padding: 5px;
    }
    tbody tr.even{ background-color: #AAA; }
    th+td{ text-align: center; }
    th+td+td+td{
        text-align: center;
        background-color: red;
    }
    tbody tr:HOVER { background-color: aqua; }
</style>
分享到：
| css盒子的浮动与定位
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS表格样式1

    由于描述中没有提供具体信息，我将根据常见的CSS表格样式实践进行详细讲解。 首先，我们来了解一下HTML表格的基本结构，由`&lt;table&gt;`、`&lt;tr&gt;`（行）、`&lt;th&gt;`（表头）和`&lt;td&gt;`（单元格）元素组成。CSS可以帮助我们...

    一些漂亮的CSS表格样式

    一些非常漂亮实用的CSS表格样式,使用方便.页面简洁!

    css表格样式打包下载

    以下是一些关于CSS表格样式的知识点： 1. **基本样式设置**：首先，可以使用`border-collapse`属性来合并单元格边框，例如`border-collapse: collapse;`，以创建简洁的表格外观。`border-spacing`属性则可以控制...

    CSS表格样式设计

    以上就是CSS表格样式设计的基本方法。通过这些技巧，你可以创建出各种风格的表格，使其在视觉上更具吸引力，并提高用户体验。在实际项目中，还可以结合JavaScript或jQuery来实现更多交互效果，如排序、过滤和分页等...

    CSS 表格样式

    在实际项目中，可以结合`myhome`这个压缩包中的源码来进一步学习和实践这些CSS表格样式的应用。通过不断试验和调整，你可以创造出独特且符合项目需求的表格样式。记得保持代码的简洁和可读性，这将对后期维护...

    java日志处理类，CSS表格样式

    本文将深入探讨Java中的日志处理，同时结合CSS表格样式，讲解如何美化日志输出。 首先，Java中常见的日志框架有Log4j、SLF4J（Simple Logging Facade for Java）和Java Util Logging (JUL)。这些框架提供了一种结构...

    精美的css控制表格样式

    1. **基础表格样式**：CSS中的`table`, `th`, `td`, `tr`等选择器是控制表格样式的基石。例如，`table`选择器用于设置整个表格的基本样式，`th`和`td`分别用于定义表头和数据单元格的样式，而`tr`则用于处理行的样式...

    表格的几种css样式效果

    以上只是一些基本的CSS表格样式效果，实际上，通过CSS3的新特性，如渐变、阴影、过渡和动画，可以创造出更多复杂的视觉效果。在实际项目中，根据设计需求和用户体验，灵活运用这些技术可以大大提升表格的美观性和...

    8款非常好看的css表格

    虽然Slick Grid使用了JavaScript，但它在CSS方面也有出色表现，提供了高度定制的表格样式，包括行选择、分页、滚动和列排序等功能，适用于大数据集的显示。 每款CSS表格都有其独特之处，开发者可以根据项目需求和...

    8款好看的css表格.rar

    本资源“8款好看的css表格.rar”提供了一系列由国外设计师编写的精美CSS表格示例，这些表格在视觉呈现上极具吸引力，能够为网页增加专业且现代的外观。 CSS表格的设计主要围绕以下几个方面展开： 1. **布局与结构*...

    js css 表格样式统一修改

    功能：用来统一网站的表格样式，可设置表格样式：表头、交替行、鼠标悬浮行、鼠标点击行、如果熟悉js还可继续添加样式比如表格标题caption的样式。 //调用方法：就3步，网站所有页面表格的样式就统一了 //1 引入样式...

    漂亮的表格css+html

    还可以使用CSS实现更复杂的表格样式，如条纹背景、悬停效果、排序箭头等。例如，给偶数行添加不同的背景色： ```css tr:nth-child(even) { background-color: #f2f2f2; } tr:hover { background-color: #ddd; } ...

    利用CSS仿Excel表格的效果

    在网页设计中，为了模拟Excel表格的样式和功能，我们可以借助CSS（层叠样式表）来实现。CSS是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言，它能让我们精确控制网页元素的布局和外观。...

    CSS表格样式：圆角，隔行，变色的具体实现

    首先，我们来看一下基本的CSS表格样式设置。在CSS中，`table` 是一个非常重要的选择器，它用于选中所有的表格元素。以下是一些基本的表格样式设置： ```css table { max-width: 100%; /* 确保表格宽度不超过其容器...

    css3表格样式产品价格页面表格样式

    在网页设计中，CSS3（层叠样式表第三版）为创建美观且功能丰富的表格样式提供了许多新特性。本文将详细探讨如何利用CSS3来设计适用于产品价格页面的表格样式，帮助你提升用户体验并增强页面视觉吸引力。 1. **边框...

    挺好看的CSS TABLE样式

    CSS表格样式允许开发者以更美观、更具有吸引力的方式展示数据，而不仅仅是传统的单调布局。 首先，`xtab.css`和`styles.css`可能是两个包含自定义CSS规则的文件。`xtab.css`可能专门针对表格样式，而`styles.css`...

    网页表格经典css样式

    本资源"网页表格经典css样式"提供了一系列经典的表格设计样式，适合初学者学习和参考。 首先，我们要理解表格的基本HTML结构。一个基本的表格由`&lt;table&gt;`标签开始，包含`&lt;tr&gt;`（行）标签，每一行中又有`&lt;td&gt;`...

    表格样式 CSS JS

    标题中的“表格样式 CSS JS”指的是使用CSS（层叠样式表）和JavaScript来美化和增强HTML表格的方法。在网页设计中，HTML表格用于组织数据，而CSS和JS则可以用来改变表格的外观、交互性和功能。 **1. CSS在表格样式...

    CSS样式Table[6] - style-table

    `更多资源.url`可能是指向其他教程或示例的链接，可以帮助进一步学习和探索CSS表格样式。 总的来说，通过熟练掌握CSS，我们可以创造出具有专业外观和用户体验的表格，让数据的呈现更加美观和易读。不断实践和尝试新...

Magicbox
Global site tag (gtag.js) - Google Analytics