html中table的样式设置

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

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

  1. 设置table的border属性,如下。当然样式我就不说了不建议这么干
<table border="1"></table>
  1. 之后的两种都是用css实现的,这里先说一种
//边框什么的自己写吧
table{
	//主要用到的就是这个属性,这个属性可以让边框重叠,就是让两个边框加一起没那么宽了
	//实际上并不好使,因为涉及到重叠问题,坑就不说了
	border-collapse: collapse;
}
  1. 就是想好边框怎么写,我这里分两块,一个就是每一个格子的右和下,还有整体的左和上
// 我用的是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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值