`
橄榄绿
  • 浏览: 277266 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用CSS为table添加边框

CSS 
阅读更多

在用CSS给表格定义1像素的边框的时候,是个比较棘手的问题,在定义的时候,很容易把边框定义重复了,很多人问过我这个问题,今天我把我为表格添加的方法给大家,其实方法很简单的,就是逻辑关系比较难懂

表格里面的单元格都是四条边的,那这单元格里面的四条边怎么定义好呢?我们拿一个只有四个单元格的表格(下面用1,2,3,4来表示四个单元格)来做模型,我是先定义的两个临边,任意两个临边都可以,我这里假定定义的是上边框和右边框。1定义之后是上边和右边有了边框,2定义之后也是上边和右边有了边框,而2同时也有了1的右边框作为它的左边框,所以2已经有了三个边框。我们再看3,当定义了上边和右边之后,那1就有了下边框,后面的4也有了左边框,然后4被定义之后,上面的2就有了下边框,也就是说2的四个边框都定义了,然后我们再观察这四个单元格,你会发现只剩下1的左边框、3的单元格的左边框和下边框及4的下边框没有定义了,而这四个边框正好是表格的左边框和下边框(图片上面红色的边框),所以大家就明白了怎么定义了吧,再给整个的table定义一个左边框和下边框就可以了。

于是我们的CSS就出来了:

.table_border td{border-top:1px #DDD solid;border-right:1px #DDD solid;}
.table_border{border-bottom:1px #DDD solid;border-left:1px #DDD solid;}

这样定义好之后,在我们以后用的时候只需要在table上面加上table_border这个class就可以了。

分享到:
评论

相关推荐

    table嵌套table边框样式

    在这个`table_style`压缩包中,可能包含了不同样式的示例文件,如使用CSS类来更精确地控制不同表格或单元格的边框样式。例如,你可以为特定表格或单元格定义类,然后在HTML中应用这些类: ```html <table class=...

    CSS控制Table内外边框、颜色、大小示例

    在默认的情况下,我们的CSS将Table的边框清除掉了,是没有的,看到的效果是这样的。 无边框Table 为了给,表格加一个边框,我在CSS里面写了这样一句: .table{border:solid 1px #add9c0;} 哎,看来是我太天真了,...

    使用css如何操作Table没有外边框只有内边框

    在网页设计中,CSS(Cascading Style Sheets)是一种强大的工具,用于控制页面元素的样式,包括表格(Table)的布局和边框。当我们想要创建一个没有外边框只有内边框的表格时,可以利用CSS来实现。下面将详细解释...

    用CSS为表格添加阴影效果.rar

    本教程将专注于如何使用CSS为表格添加阴影效果,从而提升页面的视觉吸引力和用户体验。阴影效果可以使表格看起来更立体,更容易吸引用户的注意力。我们将通过实例探讨几个关键的CSS属性和技术。 首先,了解基本的...

    CSS设置网页table边框样式.pdf

    本篇将详细解释如何使用CSS来设定网页table的边框样式。 首先,边框宽度是CSS中设置边框样式的首要因素。CSS提供了四个单独的属性来控制每个边框的宽度:`border-top-width`、`border-right-width`、`border-bottom...

    CSS样式简单实现Table没有外边框只有内边框

    总结来说,实现"Table没有外边框只有内边框"的效果主要依赖于以下几点CSS技巧: 1. 使用`border-collapse: collapse;`来合并单元格边框。 2. 将表格的边框设置为0,移除外边框。 3. 针对每个单元格设置边框,确保...

    table 圆角 html5 css3

    在HTML5和CSS3的世界里,为表格(table)添加圆角效果是一项常见的美化任务,可以使得网页设计更具现代感和优雅。本文将深入探讨如何使用HTML5和CSS3实现表格的圆角效果,以及相关的知识点。 首先,HTML5虽然在语义...

    CSS样式Table[6] - style-table

    在这个主题"CSS样式Table[6] - style-table"中,我们将深入探讨如何使用CSS来美化和控制表格的样式。 表格在数据展示和组织信息时非常有用,但默认的HTML表格样式通常较为朴素。CSS提供了丰富的选择器和属性,让...

    数据可视化大屏的css背景+边框+demo.rar

    数据可视化是一种将复杂的数据集转化为易于理解的图形或图像表示的技术,它在大数据领域中扮演着至关重要的角色。本资源包含7套数据可视化源码和8套数据可视化大屏图片,这些素材对于从事大数据分析、展示和决策支持...

    table边框线属性

    在CSS中,这两个属性可以用`border-spacing`和`padding`替代。 9. 对于嵌套表格,可以通过上述属性独立调整内外表格的边框样式。例如,你可以让外层表格有边框,而内层表格没有边框,或者改变内层表格边框的颜色和...

    HTML Table 漂亮的CSS

    5. **悬停效果**:为鼠标悬停在行或单元格上添加特殊效果,增强交互性。 ```css tr:hover { background-color: #ddd; } ``` 6. **响应式设计**:利用媒体查询(`@media`),确保表格在不同屏幕尺寸下仍能良好...

    CSS 美化Table,可以多选Table的行和列

    5. **边框圆角**:利用`border-radius`为表格添加圆角,提升现代感。 6. **行高和列宽**:通过`height`和`width`设置单元格的高度和宽度,以适应不同内容的显示需求。 接下来,我们讨论如何实现多选表格的行和列...

    CSS样式Table[3] - practical-css3-tables-with-rounded-corners-demo

    本主题“CSS样式Table[3] - practical-css3-tables-with-rounded-corners-demo”着重讨论如何使用CSS3来创建具有圆角的表格,提升网页的视觉效果。我们将深入探讨CSS3中的相关属性和技术,以及如何通过实例代码...

    让Table的TD有边框而Table右左没有边框的CSS样式

    比如这样一个CSS 复制代码代码如下: .td3{ font-size: 14px; color: #FFFFFF; background-color: #000000; BORDER-RIGHT: #f6f6f6 1px solid; //显示右边框为1px,如果不想显示就为0px BORDER-TOP: #f9f9f9 0px ...

    CSS 关于线条与边框

    比如,`.pic1` 类设置了图片的边框并添加了阴影效果,`.pic2` 使用了发光和阴影效果,`.pic3` 则仅应用了发光效果,而 `.pic5` 则为图片添加了点状边框。 ### 5. 复杂的边框类型 除了基本的实线、虚线等,CSS还...

    CSS.table.rar_Table_css table_table css_表格css

    以下是一些关于"CSS.table.rar_Table_css table_table css_表格css"中涉及的关键知识点: 1. **表格元素基础**: - `<table>`:这是HTML中创建表格的基本标签,用于定义表格的结构。 - `<tr>`:表示表格行(Table...

    CSS3动画属性边框属性等

    ` 会使用指定图片作为边框,边框宽度为30像素,拉伸填充。 **Box属性**涉及元素的盒模型。`overflow` 控制当内容溢出元素时的行为,`overflow-x` 和 `overflow-y` 分别针对水平和垂直方向。`box-shadow` 添加阴影...

    CSS样式TABLE的一些特效

    - `th`: 表头单元格可以使用`th`选择器,为其添加不同的样式,如粗体、不同颜色等。 - `caption-side`: 定义表格标题的位置,可设置为`top`(默认)或`bottom`。 4. **条纹效果** - 使用`nth-child()`选择器可以...

Global site tag (gtag.js) - Google Analytics