原生表格table

简介: 原生表格table

1)

table{
         width: 100%;//让表格里面的内容充满整个区域


       border-collapse:collapse; 去掉html表格之table间的空隙


2)表格里面的内容居中


.mytable td{
    text-align: center;
}


3)HTML中怎么去掉table中th的默认粗体


可以在<th>标签中设置style="font-weight:300; font-size:12px;",也可以在<style></style>


中设置:即


<style type="text/css">
table tr th{
font-weight:300px;
font-size:12px
}


或者


.table>tr>th{
   background: #F7F8FA;
  font-weight:normal;
  font-size:14px;
}


4)CSS中给表格的第一列以及最后一列设置不同的样式


https://blog.csdn.net/Nalaluky/article/details/80012922


table tr td:last-child{
样式代码....
}
除了第一列元素外
.mytable tr td:not(:first-child){
border-bottom:1px dashed #ccc;
}
border-radius: 4px;
box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.14);


相关文章
|
22天前
|
敏捷开发
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
|
4月前
|
Java 数据库连接 数据库
使用原生JDBC动态解析并获取表格列名和数据
使用原生JDBC动态解析并获取表格列名和数据
|
JavaScript
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
6432 0
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
|
6月前
|
前端开发 JavaScript Java
表格插件-bootstrap table的分页使用示例
表格插件-bootstrap table的分页使用示例
41 0
|
6月前
|
JSON 前端开发 JavaScript
表格插件-bootstrap table的使用示例
表格插件-bootstrap table的使用示例
38 0
element table表格表头动态渲染效果demo(整理)
element table表格表头动态渲染效果demo(整理)
|
9月前
vue-mergeable-table 动态生成的可合并行列的表格
vue-mergeable-table 动态生成的可合并行列的表格
80 0
Element-ui 表格 (Table) 组件中动态合并单元格
Element-ui 表格 (Table) 组件中动态合并单元格
530 0
Element-ui 表格 (Table) 组件中动态合并单元格
|
11月前
|
存储 API
【ElementUI】Table表格动态合并
【ElementUI】Table表格动态合并
145 0
|
12月前
|
前端开发 JavaScript 大数据
Concis组件库封装——Table表格
Concis组件库封装——Table表格封装记录
75 1
Concis组件库封装——Table表格

热门文章

最新文章