css table设置边框_table布局的一些总结

工作中遇到的自适应表格，实现过程并不顺畅，花费了一些功夫。将其中不熟悉的技术点总结如下，期待下次可以行云流水的做出来。

1、自适应表格如何实现文本溢出点点的效果

自适应的表格，由于单元格的流动性，文字不存在溢出这样情况，如下图所示：

如何解决自适应表格内容过多将布局撑乱的情况？

给table标签加如下css声明：

table-layout: fixed;

table-layout作用就是让表格布局固定，使表格的宽度不会根据内容多少而动态变化。设置了 table-layout：fixed后的效果：

2、td不用设置height

单元格内容太多，会出现内容折行限制，将td撑高，所有设置 height 没有意义。

如何设置td的初始高度

设置 td 初始高度最好用 padding 进行设置，考虑到了单元格被撑开的情况。可如下设置：

.table td, .table th {padding: 5px 10px;
}

3、表格的边框问题

给th、td都设置了border后会出现如下情形：

如何让表格的边框重叠

给table设置如下css：

table {border-collapse: collapse;border-spacing: 0;
}

border-collapse：可以让单元格的之间共享边框 border-spacing：消除单元格之间的间距

css table设置边框_table布局的一些总结相关推荐

css table设置边框_（代码示例）css实现等高布局的三种方式
本篇文章给大家带来的内容是关于css实现等高布局的三种方式(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文讲的等高布局是在不手动设置元素高度的情况下,使用纯css实现 ...
table 设置边框
本文引自:https://www.cnblogs.com/leona-d/p/6125896.html 示例代码: <!DOCTYPE html> <html lang=" ...
【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
文章目录一.网页布局本质二.盒子模型三.盒子边框 Border 1.CSS 2.0 文档查询 2.边框设置语法 3.边框设置综合写法一.网页布局本质构建一个网页 , 首先 , 创建盒子模型 ...
CSS：设置边框和背景
应用边框样式边框基本设置首先简单介绍一下使用边框最常用的三个基本属性: 属性说明值 border-width 设置边框的宽度度量单位(em.px.cm等) border-color 设置边框 ...
html边框自动变颜色,css怎么设置边框颜色？
元素外边距内就是元素的的边框 (border).元素的边框就是围绕元素内容和内边据的一条或多条线.每个边框有 3 个方面:宽度.样式,以及颜色.下面我们就来看一下css设置边框颜色的方法. css可以 ...
如何在HTML网页里添加CSS边框,css如何设置边框？
在CSS中,可以设置border属性来设置边框.border是一个简写属性,可以在一个声明设置所有的边框属性.可以按照border-width.border-style.border-color顺序设 ...
html怎么设置一条边框线,css怎么设置边框？
css可以直接使用border简写属性在一个声明设置所有的边框属性.可以按照border-width.border-style.border-color顺序设置,也可以单独设置这几个属性. css设置 ...
html 框线设置颜色,css怎么设置边框颜色？
元素外边距内就是元素的的边框 (border).元素的边框就是围绕元素内容和内边据的一条或多条线.每个边框有 3 个方面:宽度.样式,以及颜色.下面我们就来看一下css设置边框颜色的方法. css可以 ...
【响应式Web前端设计】css如何设置边框的圆角样式？border-radius属性设置圆角样式（图文）
border-radius包含5种设置圆角样式方式: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. borde ...

css table设置边框_table布局的一些总结

1、自适应表格如何实现文本溢出点点的效果

2、td不用设置height

3、表格的边框问题

css table设置边框_table布局的一些总结相关推荐

最新文章

热门文章