以下內(nèi)容轉(zhuǎn)載自騰訊位置服務的文章《時間選擇器組件之關于table走過的彎路》
作者：騰訊位置服務
鏈接：https://segmentfault.com/a/1190000023270395
來源：SegmentFault
著作權歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權，非商業(yè)轉(zhuǎn)載請注明出處。

為了提高開發(fā)者的研發(fā)效率，提升產(chǎn)品品質(zhì)，我們提供一套基于餓了么UI實現(xiàn)的UI組件庫，TMAP-UI---旨在解決的組件地圖場景下應用的問題。

最近在新增TMAP-UI組件庫的開發(fā)過程中，時間選擇器是開發(fā)者反饋需求較多的一個組件，今天把在開發(fā)過程中遇到的一些問題分析給大家。element-ui有原生的時間選擇器，但是，在我們的交互設計師是根據(jù)地圖實際應用場景中的特性抽象組件，element-ui的樣式以及交互操作都無法滿足設計需求，需要基于源碼進行二次開發(fā)，最小成本實現(xiàn)這個通用組件。今天主要聊下開發(fā)中遇到的一些關于table的實現(xiàn)問題，對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標準。

關于時間選擇器

時間選擇器設計圖

根據(jù)上圖為設計師給出的時間選擇器的設計圖，選擇時間范圍是一個重要的新增功能。

實現(xiàn)它的步驟拆分成以下幾步：

• 1.實現(xiàn)基本表格布局

• 2.添加日期范圍選擇的樣式

實現(xiàn)基本表格布局

首先我們需要按照設計圖調(diào)整日期間的間距和每個日期的單元格大小。所以，需要對于每個子格設置寬、高和margin進行布局。

從上圖左側(cè)可以看出，樣式在style成功設置的情況下，右側(cè)盒模型的寬和margin都沒有生效。

我首先猜測是不是哪里的樣式壓蓋了，又或者是樣式本身因為某些原因?qū)е聸]有生效。

于是使用常用的樣式壓蓋方法，在沒生效的樣式后添加!important來提高設置樣式的優(yōu)先級，但還是沒有生效。

后來查了W3C的關于table的設置說明，發(fā)現(xiàn)了上文提到的td自帶的display:table-cell樣式。于是嘗試在樣式中新增display:block替代原有table自帶樣式。果然當我設置之后，子td的寬高和margin都生效了。

查閱資料之后發(fā)現(xiàn)，一方面td標簽不允許設置margin，另一方面，在table整體的寬度設定后，樣式不會按照td標簽中設置的寬度執(zhí)行，會按照整體的table寬度均分給每一個子td。如果希望一些特殊的效果，對寬度設置百分比是可以生效的。這其實能夠理解，如果在table-cell的模式下允許某個子模塊設置寬度和margin，會導致子模塊的寬度和高度不可預期，對同一行的其他子塊的寬高造成影響?？偨Y(jié)下，為了保證table的樣式整體聯(lián)動性，table寬高和子td的寬高設置不能同時使用絕對數(shù)值來設置，只能設置其中一個絕對值，另外一個用相對值來計算劃分。

如果我們通過display:block完成格式，整體的表格結(jié)構(gòu)就會被打破，產(chǎn)生更多不符合表格邏輯預期的樣式問題。于是我們通過每個子單元格均分的特性，設置總的行寬和行高來控制單元格自身的大小和之間的距離，從而達到實現(xiàn)整體表格布局的效果。

添加日期范圍和選擇樣式

• 盒子寬度問題

那當我們hover態(tài)的盒子和背景顏色的盒子大小不一樣的時候，我們就需要在td的內(nèi)部內(nèi)置一個盒子。這樣通過設置顏色我們就可以實現(xiàn)背景。按照上述，只要我們設置好整體的table寬度和背景顏色，就可以得到日期選中范圍的設計背景效果，對應的背景顏色得到如下結(jié)果。

設定整體寬度之后，我們發(fā)現(xiàn)部分子td之間存在一條深色的邊界線。這是由于他們之間出現(xiàn)了互相壓蓋，整體的七個td的總寬度設計稿給出是242px，按照預期是應該七個子模塊均分寬度。但我查看具體每個子td的寬度發(fā)現(xiàn)，有的子td寬度是34、有的是35。這也就是說，在寬度不能夠被子模塊整除均分的情況下，table自動為我們做了取整，并且為了保持總寬度的不便，有些被向下取整，有些被向上取整。

目前想到的解決辦法是，通過計算固定寬度的總寬度使得每一個td能夠被整除。

• 選中態(tài)背景問題

接下來，我們需要解決在選中態(tài)下起終點日期的樣式問題。按照原有的選中樣式無論是否添加背景都不能滿足需求。見下圖，會出現(xiàn)10號日期右側(cè)空白或26號日期多余背景的情況。

對于起始日期，要完成上述要求，我們需要將起始框以及它的右側(cè)作為塊內(nèi)容并且仍能保證水平居中。解決辦法是，對于10號日期的選擇起點，將左側(cè)設置margin，右側(cè)設置相應寬度的padding。

做到這里基本可以認為完成了一個日期范圍選擇功能。

但實戰(zhàn)發(fā)現(xiàn)，還沒完......

當用戶只選擇了起點我們會發(fā)現(xiàn)選中態(tài)導致右側(cè)的邊界還會有藍色背景色。于是，我們還要利用scss的語法特性為樣式設置生效條件來區(qū)分兩種不同的顯示策略。

• border-radius問題

設計稿要求，每一行的選擇框的起始和末尾需要有圓角。這樣一個常見的需求，table果然沒讓我失望，對tr標簽設置無效。原因是因為在border-collapse設置為separate下，對于所有table標簽設置圓角都無法生效。

查閱資料，找到了兩種思路的解決方法。

第一種就是對tr的子td， first-child/last-child設置圓角。講到這里就不得不提t(yī)able的一個屬性:border-collapse。這個屬性用來決定表格的邊框是分開的還是合并的。在分隔模式下，相鄰的單元格都擁有獨立的邊框。在合并模式下，相鄰單元格共享邊框。這里有三個常用值：inherit, separate,collapse。separate表示每個單元格擁有獨立的邊框，inherit表示相鄰的單元格共用同一條邊框。

當在separate模式下，我們還可以通過設置border-spacing設置邊框的寬度。

w3c border-spacing配圖

第二種當設置border-collapse:inherit，便可以設置td和tr的圓角了。

總結(jié)

在table布局下，有許多自己樣式布局，在我們熟練掌握了之后會發(fā)現(xiàn)有很多方便的特性。我也把這次遇到的問題沉淀成了表格，希望能對大家以后的開發(fā)有點幫助，少走彎路。

產(chǎn)品推廣

地圖組件是專為移動端定制的輕應用產(chǎn)品，支持各手機端主流瀏覽器，可以實現(xiàn)位置展示、路線規(guī)劃、地圖選點、前端定位等多種場景的下的調(diào)用。相比于JS API, 可以通過高度參數(shù)化的URL直接調(diào)用，極大簡化開發(fā)的復雜度，降低維護成本。歡迎大家體驗！