因为用到了一个自定义的表格所以这里记录一下样式写法
这里的样式基本上指的是边框了
先说明一下设置边框的方式
- 设置table的border属性,如下。当然样式我就不说了不建议这么干
<table border="1"></table>
- 之后的两种都是用css实现的,这里先说一种
//边框什么的自己写吧
table{
//主要用到的就是这个属性,这个属性可以让边框重叠,就是让两个边框加一起没那么宽了
//实际上并不好使,因为涉及到重叠问题,坑就不说了
border-collapse: collapse;
}
- 就是想好边框怎么写,我这里分两块,一个就是每一个格子的右和下,还有整体的左和上
// 我用的是less,其他样式请写自己的语法
table {
width: 700px;
// 下面设置表格整体的边框,左上
border-top: 1px solid #e8eaec;
border-left: 1px solid #e8eaec;
tr {
width: 100%;
height: 40px;//每一行高度
td {
width: 20%; // 因为我的一行分了五个,所以是20%
// 下面设置每个格子边框,右下
border-right: 1px solid #e8eaec;
border-bottom: 1px solid #e8eaec;
text-align: center;
& * {
/* 解释下这个是干啥
& 代表的就是当前选择器选中的项,也就是td
* 匹配所有的元素(因为我不确定表格里是放的文本还是别的元素什么,就加分通配符,其实写成 &>* 会更好
里面的属性是垂直居中,具体说明自己百度吧
*/
vertical-align: middle;
}
}
}
}
对了还有个很重要的东西没写
/* 干掉可恶的边距 */
<table cellspacing="0" cellpadding="0"></table>