原生表格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);


相关文章
|
8月前
|
Java 数据库连接 数据库
使用原生JDBC动态解析并获取表格列名和数据
使用原生JDBC动态解析并获取表格列名和数据
107 0
|
3月前
table表格基础知识及简单运用
table表格基础知识及简单运用
64 0
|
5月前
|
JavaScript 前端开发 Shell
Element-ui Table表格导出功能的实现
Element-ui Table表格导出功能的实现
92 0
|
5月前
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
4452 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
7月前
|
JavaScript 前端开发
table表格和下拉组件中data为什么必须是一个函数?
table表格和下拉组件中data为什么必须是一个函数?
|
JSON 前端开发 JavaScript
表格插件-bootstrap table的使用示例
表格插件-bootstrap table的使用示例
86 0
element table表格表头动态渲染效果demo(整理)
element table表格表头动态渲染效果demo(整理)
vue-mergeable-table 动态生成的可合并行列的表格
vue-mergeable-table 动态生成的可合并行列的表格
190 0
|
存储 API
【ElementUI】Table表格动态合并
【ElementUI】Table表格动态合并
269 0
|
JavaScript CDN
template模板怎么渲染table表格?
template模板怎么渲染table表格?
165 0
template模板怎么渲染table表格?