共计 2875 个字符，预计需要花费 8 分钟才能阅读完成。
为了进步开发者的研发效率，晋升产品品质，咱们提供一套基于饿了么 UI 实现的 UI 组件库，TMAP-UI— 旨在解决的组件地图场景下利用的问题。
最近在新增 TMAP-UI 组件库的开发过程中，工夫选择器是开发者反馈需要较多的一个组件，明天把在开发过程中遇到的一些问题剖析给大家。element-ui有原生的工夫选择器，然而，在咱们的交互设计师是依据地图理论利用场景中的个性形象组件，element-ui的款式以及交互操作都无奈满足设计需要，须要基于源码进行二次开发，最小老本实现这个通用组件。明天次要聊下开发中遇到的一些对于 table 的实现问题，对 table 一探到底…
对于 table 特点
首先，咱们先来根本理解一下table。
<table>
<caption>A summary of the UK's most famous punk bands</caption>
<thead>
<tr>
<th scope="col" class="fixed-width-test2">Band</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Buzzcocks</th>
<td>1976</td>
<td>9</td>
<td>Ever fallen in love (with someone you shouldn't've)</td>
</tr>
</tbody>
</table>一个根本的 table 布局次要由 table、tbody、th、td 等标签组成。W3C 规范中，table 的每个标签都自带了 display 款式。例如 td 标签默认就会有 display:table-cell 的款式，在这个默认款式下，新增 margin 的设置是不会失效的。更具体标签对应款式能够查看 W3C 规范。
对于工夫选择器
工夫选择器设计图
依据上图为设计师给出的工夫选择器的设计图，抉择工夫范畴是一个重要的新增性能。
实现它的步骤拆分成以下几步：
- 1. 实现根本表格布局
- 2. 增加日期范畴抉择的款式
实现根本表格布局
首先咱们须要依照设计图调整日期间的间距和每个日期的单元格大小。所以，须要对于每个子格设置宽、高和 margin 进行布局。
从上图左侧能够看出，款式在 style 胜利设置的状况下，右侧盒模型的宽和 margin 都没有失效。
我首先猜想是不是哪里的款式压盖了，又或者是款式自身因为某些起因导致没有失效。
于是应用罕用的款式压盖办法，在没失效的款式后增加 !important 来进步设置款式的优先级，但还是没有失效。
起初查了 W3C 的对于 table 的设置阐明，发现了上文提到的 td 自带的 display:table-cell 款式。于是尝试在款式中新增 display:block 代替原有 table 自带款式。果然当我设置之后，子 td 的宽高和 margin 都失效了。
查阅材料之后发现，一方面 td 标签不容许设置 margin，另一方面，在 table 整体的宽度设定后，款式不会依照 td 标签中设置的宽度执行，会依照整体的 table 宽度均分给每一个子 td。如果心愿一些非凡的成果，对宽度设置百分比是能够失效的。这其实可能了解，如果在table-cell 的模式下容许某个子模块设置宽度和margin，会导致子模块的宽度和高度不可预期，对同一行的其余子块的宽高造成影响。总结下，为了保障 table 的款式整体联动性，table 宽高和子 td 的宽高设置不能同时应用相对数值来设置，只能设置其中一个绝对值，另外一个用相对值来计算划分。
如果咱们通过 display:block 实现格局，整体的表格构造就会被突破，产生更多不合乎表格逻辑预期的款式问题。于是咱们通过每个子单元格均分的个性，设置总的行宽和行高来管制单元格本身的大小和之间的间隔，从而达到实现整体表格布局的成果。
## 增加日期范畴和抉择款式
-
盒子宽度问题
那当咱们 hover 态的盒子和背景色彩的盒子大小不一样的时候，咱们就须要在 td 的外部内置一个盒子。这样通过设置色彩咱们就能够实现背景。依照上述，只有咱们设置好整体的 table 宽度和背景色彩，就能够失去日期选中范畴的设计背景成果，对应的背景色彩失去如下后果。
设定整体宽度之后，咱们发现局部子 td 之间存在一条深色的边界线。这是因为他们之间呈现了相互压盖，整体的七个 td 的总宽度设计稿给出是 242px，依照预期是应该七个子模块均分宽度。但我查看具体每个子 td 的宽度发现，有的子 td 宽度是 34、有的是 35。这也就是说，在宽度不可能被子模块整除均分的状况下，table 主动为咱们做了取整，并且为了放弃总宽度的不便，有些被向下取整，有些被向上取整。
目前想到的解决办法是，通过计算固定宽度的总宽度使得每一个 td 可能被整除。
-
选中态背景问题
接下来，咱们须要解决在选中态下起起点日期的款式问题。依照原有的选中款式无论是否增加背景都不能满足需要。见下图，会呈现 10 号日期右侧空白或 26 号日期多余背景的状况。
对于起始日期，要实现上述要求，咱们须要将起始框以及它的右侧作为块内容并且仍能保障程度居中。解决办法是，对于 10 号日期的抉择终点，将左侧设置margin，右侧设置相应宽度的padding。
做到这里根本能够认为实现了一个日期范畴抉择性能。
但实战发现，还没完 ……
当用户只抉择了终点咱们会发现选中态导致右侧的边界还会有蓝色背景色。于是，咱们还要利用 scss 的语法个性为款式设置失效条件来辨别两种不同的显示策略。
-
border-radius 问题
设计稿要求，每一行的抉择框的起始和开端须要有圆角。这样一个常见的需要，table 果然没让我悲观，对 tr 标签设置有效。起因是因为在 border-collapse 设置为 separate 下，对于所有 table 标签设置圆角都无奈失效。
查阅材料，找到了两种思路的解决办法。
第一种就是对 tr 的子 td，first-child/last-child设置圆角。讲到这里就不得不提 table 的一个属性:border-collapse。这个属性用来决定表格的边框是离开的还是合并的。在分隔模式下，相邻的单元格都领有独立的边框。在合并模式下，相邻单元格共享边框。这里有三个罕用值：inherit, separate,collapse。separate示意每个单元格领有独立的边框，inherit 示意相邻的单元格共用同一条边框。
当在 separate 模式下，咱们还能够通过设置 border-spacing 设置边框的宽度。
w3c border-spacing 配图
第二种当设置border-collapse:inherit，便能够设置 td 和 tr 的圆角了。
总结
在 table 布局下，有许多本人款式布局，在咱们熟练掌握了之后会发现有很多不便的个性。我也把这次遇到的问题积淀成了表格，心愿能对大家当前的开发有点帮忙，少走弯路。
产品推广
地图组件是专为挪动端定制的轻利用产品，反对各手机端支流浏览器，能够实现地位展现、路线布局、地图选点、前端定位等多种场景的下的调用。相比于 JS API, 能够通过高度参数化的 URL 间接调用，极大简化开发的复杂度，升高保护老本。欢送大家体验！