html中table的样式设置

因为用到了一个自定义的表格所以这里记录一下样式写法

这里的样式基本上指的是边框了
先说明一下设置边框的方式

1. 设置table的border属性，如下。当然样式我就不说了不建议这么干

<table border="1"></table>

2. 之后的两种都是用css实现的，这里先说一种

//边框什么的自己写吧
table{
	//主要用到的就是这个属性，这个属性可以让边框重叠，就是让两个边框加一起没那么宽了
	//实际上并不好使，因为涉及到重叠问题，坑就不说了
	border-collapse: collapse;
}

3. 就是想好边框怎么写，我这里分两块，一个就是每一个格子的右和下，还有整体的左和上

// 我用的是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>