表格行與列邊框樣式處理的原理分析及實戰應用
歡迎你們前往騰訊雲社區，獲取更多騰訊海量技術實踐乾貨哦~css
做者：韓宇波html
導語：table之間的邊框存在共用問題，天然而然就存在衝突。既然存在衝突，那麼就勢必涉及到最後渲染哪個樣式的問題。本文就主要研究當衝突產生時，如何讓瀏覽器按照本身意願渲染衝突邊框。在這篇文章中都有介紹，以及對錶格的邊框渲染原理進行了深度的剖析。前端
最近需求中有用到table，並在作需求的過程當中遇到table border的問題，在空餘的時間把遇到的問題進行探索一番，收穫頗多，特此分享；chrome
廢話很少說，直接上乾貨！瀏覽器
表格行與列邊框樣式處理的原理分析
一、border-style:none優先級最低 demo安全
結論性能優化
a）當且僅當兩個相鄰產生衝突的邊框的border-style爲none時，衝突邊框纔不會顯示服務器
二、border-style:hidden優先級高於border-style:solid demo運維
結論前端性能
a）border-style:hidden;邊框的優先級高於solid樣式的邊框
三、border-style優先級 demo
結論
a）hidden > double > solid > dashed > dotted > none（默認值）
四、邊框的溢出與style屬性有關 demo
結論 a）上面兩個角中水平方向緊貼着table邊框的邊很重要，如若border-style爲hidden，則邊框會溢出 b）垂直方向上不會發生溢出狀況 c）溢出的邊框不會佔用文本流的空間
理由 具體實例能夠查看border-style優先級
** 五、border-width較大者優先渲染 demo**
結論 a）border-width較大者邊框樣式將被渲染
理由 命名爲「中」的單元格邊框比其餘邊框都要大，所以渲染的是「中」單元格的邊框，於是得出較大邊框樣式將被渲染，也符合W3C裏面對哪條邊渲染的解釋：「The rule of thumb is that at each edge the most "eye catching" border style is chosen」
** 六、table-border優先級 demo**
結論 a）優先級以下：'table-cell'，'table-row'，'table-row-group'，'table-col'，'table-col-group', 'table'
理由 能夠到Demo7啓用審查工具逐層去掉'table-cell'，'table-row'，'table-row-group'，'table-col'，'table-col-group', 'table'邊框，便可看到效果 七、左上優先渲染原則 demo
結論 a）水平方向上：當兩個單元格只存在顏色不一致的狀況下，發生衝突的單元格相對較左側單元格的樣式 b）垂直方向上：當兩個單元格只存在顏色不一致的狀況下，發生衝突的單元格相對較頂部單元格的樣式
** 八、border-style:double四個角的渲染方式 demo**
chorme
FF
IE
結論 a）四個角重合之處採用組合層疊的方式進行渲染，而不是單一的選擇某一種樣式,而四條邊框則非重合（單一選擇某一條邊進行渲染）（chrome與IE，FF四個角重合之處不會採用組合層疊的方式進行渲染） b）能夠看出在FF下，四個角重合之處渲染優先級是，垂直方向上的兩個相鄰單元格，相對偏下的單元格的衝突邊進行渲染
理由 從「中」這個單元格的四個角能夠看出，四個角除了會的底邊是有其餘叫層疊而來，而不是單一的去選擇某種邊框去渲染
** 九、border-style:double表現形式 demo**
結論 a）border-style:double;寬度須要大於等於3px才能體現，不然，樣式與solid無異 b）border-style:double;會發生溢出，而且左右溢出值不一致
十、border-style:ridge與border-style:groove的表現形式 demo
結論 a）table2 ~ table5發生衝突邊渲染狀況能夠得出 ridge > groove b）當ridge 與 groove衝突而且在表格 非 第一行發生衝突時，兩個衝突單元格的左上角和右上角以及衝突邊的上角都存在問題 c）從table二、table三、table4中能夠看出，當outset 與 inset衝突且在表格 非 第一行發生衝突時，groove ==> outset， ridge ==> inset
理由 例10~例14能夠到線上例子詳細查看
十一、border-style:outset與border-style:inset的表現形式 demo
結論 a）從table2~table5發生衝突邊渲染狀況能夠得出 outset > inset b）從table二、table四、table5中能夠看出，當outset 與 inset衝突且在表格第一行發生衝突時，兩個衝突單元格的左上角和右上角以及衝突邊的上角都存在問題 c）從table二、table四、table5中能夠看出，當outset 與 inset衝突且在表格第一行發生衝突時，outset ==> groove， inset ==> ridge
理由 例10~例14能夠到線上例子詳細查看
十二、border-style:outset與border-style:ridge的表現形式 demo
結論 a）table2~table5發生衝突邊渲染狀況能夠得出 ridge > outset b）兩個單元格發生衝突之後，左上角都存在渲染問題 c）當outset 與 inset衝突且在表格第一行發生衝突時，兩個衝突單元格的左上角和右上角以及衝突邊的上角都存在問題 d）綜合上部表現能夠看出，當兩個單元格發生衝突之後，處於表格的最後一行時，衝突邊的上部（角）存在渲染問題 e）綜合上部表現能夠看出，outset未發生衝突的邊框的上部角會出現渲染問題
理由 例10~例14能夠到線上例子詳細查看
** 1三、border-style:groove與border-style:inset的表現形式 demo**
結論 a）table2~table5發生衝突邊渲染狀況能夠得出 groove > inset b）groove與outset能夠相互轉化，ridge與inset能夠相互轉化
理由 例10~例14能夠到線上例子詳細查看
1四、border-style:groove與border-style:outset的表現形式 demo
結論 a）table2~table5發生衝突邊渲染狀況能夠得出 outset > groove
理由 例10~例14能夠到線上例子詳細查看
1五、direction屬性對table-border的影響 demo
結論 a）tr上使用direction: rtl;屬性，單元格（只是邊框，內容不變）並不會左右調換，而是邊框向後推了（最後一個邊框使用了渲染成第二個邊框，倒數第二個邊框渲染成倒數第三個邊框，依此列推） b）table上使用direction: rtl;屬性,會使單元格左右調換，而且發生衝突的單元格相對較右側單元格的樣式
備註 在tr上使用direction: rtl;屬性，僅在google下生效，其餘瀏覽器下不會生效
結論：
- border-collapse: collapse;存在衝突狀況，border-collapse: separate;不存在衝突狀況（理所固然）；
- border-style: hidden;邊框優先級最高，hidden屬性優先於全部其餘邊界的衝突；
- border-style: none;是邊框樣式的默認值，其優先級最低，只有當發生衝突的全部元素的邊框屬性都爲"none"時，邊框纔會被省略；
- border-width的值不相同時，窄邊界將會被捨棄，較寬的邊界會被顯示；
- border-width的值相同時，border-style樣式優先級順序爲'double'，'solid''，'dotted'，'ridge'，'outset'，' 'inset'；
- border-color的值不相同時，border-color最終顯示的顏色優先級以下爲'table-cell'，'table-row'，'table-row-group'，'table-col'，'table-col-group'，'table'；
- border-color的值不相同時，但都是同一類型（如：table-cell），水平方向由direction屬性決定，若direction:ltr屬則採用相對較左側的元素樣式，若direction:rtl屬則採用相對較右側的元素樣式；垂直方向上則採用相對較靠近頂部的元素樣式；
- border-collapse: collapse;相鄰的邊框存在衝突，但兩對角的兩個單元格是不存在衝突現象；
- border-style:double;寬度渲染與設置值不一致；
- border-style:double;寬度須要大於3px才能體現，不然，樣式與solid無異；
- 水平方向上：當兩個單元格只存在顏色不一致的狀況下，衝突邊界渲染的樣式與direction（table上設置該屬性）有關。若direction:ltr屬則採用相對較左側的元素樣式，若direction:rtl屬則採用相對較右側的元素樣式；垂直方向上：當兩個單元格只存在顏色不一致的狀況下，較靠近頂部的邊框樣式將被渲染；
- 四個角重合之處採用組合層疊的方式進行渲染，而不是單一的選擇某一種樣式,而四條邊框則非重合（單一選擇某一條邊進行渲染）
- 上面兩個角中水平方向緊貼着table邊框的邊很重要，如若border-style爲hidden，則邊框會，溢出垂直方向上不會發生溢出狀況，溢出的邊框不會佔用文本流的空間
另外發現一些兼容性問題：
- 水平方向上：當兩個單元格只存在顏色不一致的狀況下，衝突邊界渲染的樣式與direction（tr上設置該屬性在chrome有效，在其餘瀏覽器上設置無任何效果）有關。若direction:ltr屬則採用相對較左側的元素樣式，若direction:rtl屬則致使渲染失常（沒法解釋）
- 四個角重合之處採用組合層疊的方式進行渲染，而不是單一的選擇某一種樣式,而四條邊框則非重合（單一選擇某一條邊進行渲染）（chrome與IE）
- 在FF下，FF四個角重合之處不會採用組合層疊的方式進行渲染，四個角重合之處渲染規則是採用垂直方向上的兩個相鄰單元格，相對偏下的單元格的衝突邊進行渲染
- a）在FF和IE下，ridge和inset渲染是同樣的，groove和outset渲染是同樣的；
b）在chrome下，當outset 與 inset衝突且在表格第一行發生衝突時，outset ==> groove， inset ==> ridge，當outset 與 inset衝突且在表格 非 第一行發生衝突時，groove ==> outset，ridge ==> inset
表格行與列邊框樣式處理的實戰應用
上面分享了一些實用表格時，常遇到的一些衝突；
下面內容是對上述文章中提到的一些知識點加以運用，用到具體的例子上。
採用表格佈局最遠能夠追溯到上個世紀90年代，當時使用table進行佈局是沒有辦法的辦法。從css2.0之後以table爲主的網頁佈局慢慢的退出歷史舞臺，而採用如今爲你們所熟悉的div + css的佈局方式。
table網頁佈局方式退出歷史舞臺並不等於table也退出舞臺，table有它自身的好處。目前你們使用table多數用於數據展現，數據展現必然會涉及到數據的對比，突出重點數據的需求。所以則產生了相似下圖的展現樣式。
看到這個視覺稿，想必你們第一反應是高亮列的實現方式應該是在td上面添加高亮邊框便可，沒什麼難度的。若是你這樣認爲那就錯了。
在td上面直接添加border，會在形成左側邊缺失，具體緣由能夠參考（demo），若是要在高亮列的單元格直接實現缺失的左邊框(採用行內樣式或者加權重的方法，也是實現不了的)，暫時是沒有什麼辦法的。若是有請聯繫筆者。
若是你查閱了上面推薦的文章，那麼你就知道產生這種現象的緣由。
解決方法是在高亮列的前一列的右邊框添加高亮邊框。
看到解決方法有沒有一種很蛋疼的感受，高亮列產生的問題，要跑到高亮列的前一列去解決。
今天我就針對這一類的問題進行研究並提供相關解決方法
解決上面的問題很簡單
style.css
/*公共 start*/
*{margin: 0;padding: 0;}
table{
border-collapse: collapse;
font-size: 14px;
width: 30%;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
table tr td:first-child{
font-weight: bold;
}
th{
background-color: #f3f3f3;
}
/*公共 end*/
.comparison-table{
width: 30%;
border: 1px solid;
border-color: #e6ebf2;
color: #333;
text-align: left;
font-size: 14px;
border-collapse: collapse;
}
.comparison-table th,
.comparison-table td{
vertical-align: top;
line-height: 1.7;
padding: 0;
border: 1px solid #d7e7f3;
}
.comparison-table thead th{
background-color: #f6f8fa;
line-height: 1;
}
.comparison-table .comparison-table-inner{
padding: 15px 40px;
color: inherit;
}
.comparison-table tbody tr td:first-child{
font-weight: bold;
}
.comparison-table tr td:nth-child(2),
.comparison-table tr th:nth-child(2){
border: 1px double #22d1b4;
}
.comparison-table colgroup col:nth-child(2){
border: 1px double #22d1b4;
}
.comparison-table tr th:nth-child(2){
background-color: #ccf0ec;
color: #22d1b4;
}
demo.html
<table class="comparison-table"> <colgroup> <col style="width:22%;"> <col style=""> <col style=""> </colgroup> <thead> <tr> <th> <div class="comparison-table-inner"> <p>優點</p> </div> </th> <th> <div class="comparison-table-inner"> <p>雲服務器</p> </div> </th> <th> <div class="comparison-table-inner"> <p>傳統服務器</p> </div> </th> </tr> </thead> <tbody> <tr> <td> <div class="comparison-table-inner">彈性</div> </td> <td> <div class="comparison-table-inner">彈性擴展，靈活配置</div> </td> <td> <div class="comparison-table-inner">運維困難</div> </td> </tr> <tr> <td> <div class="comparison-table-inner">可靠</div> </td> <td> <div class="comparison-table-inner">穩定可靠，數據放心</div> </td> <td> <div class="comparison-table-inner">系統脆弱，數據丟失</div> </td> </tr> <tr> <td> <div class="comparison-table-inner">易用</div> </td> <td> <div class="comparison-table-inner">即買即用，快速部署</div> </td> <td> <div class="comparison-table-inner">費心麻煩</div> </td> </tr> <tr> <td> <div class="comparison-table-inner">安全</div> </td> <td> <div class="comparison-table-inner">立體防禦，專業支持</div> </td> <td> <div class="comparison-table-inner">黑客入侵</div> </td> </tr> </table>
主要知識點
- 利用:nth-child(n)選擇器選擇高亮列/行
- 當邊框樣式爲實線時，運用double優先級比solid高的特色，覆蓋solid樣式
- 運用1px或2px的double視覺上與solid同樣的特色
- 運用'table-cell'，'table-row'，'table-row-group'，'table-col'，'table-col-group', 'table'之間渲染優先級的關係
solid實現是如此，那dashed實現又如何呢
dashed.css
/*公共 start*/
*{margin: 0;padding: 0;}
a{color: #2277da;}
table{
border-collapse: collapse;
font-size: 14px;
width: 30%;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
table tr td:first-child{
font-weight: bold;
}
th{
background-color: #f3f3f3;
}
/*公共 end*/
.method-4 th,
.method-4 td{
padding: 20px;
text-align: center;
}
.method-4 tr{
border-top: 1px dashed #d3d3d3;
border-bottom: 1px dashed #d3d3d3;
}
.method-4 thead tr{
border-top-width: 0;
}
.method-4 tr:last-child{
border-bottom-width: 0;
}
.method-4 colgroup{
border: 1px dashed #d3d3d3;
}
.method-4 tr td:nth-child(3),
.method-4 tr th:nth-child(3),
.method-4 colgroup:nth-child(3){
border: 1px dashed #22d1b4;
}
.method-4 tr td:nth-child(1),
.method-4 tr th:nth-child(1){
border-left: 1px dashed #22d1b4;
}
.method-4 colgroup:nth-child(1){
border: 1px dashed #22d1b4;
}
dashed.html
<div class="method-4"> <table> <colgroup></colgroup> <colgroup class="highlight"></colgroup> <colgroup></colgroup> <thead> <tr> <th>優點</th> <th>雲服務器</th> <th>傳統服務器</th> </tr> </thead> <tbody> <tr> <td>彈性</td> <td>彈性擴展，靈活配置</td> <td>運維困難</td> </tr> <tr> <td>可靠</td> <td>穩定可靠，數據放心</td> <td>系統脆弱，數據丟失</td> </tr> <tr> <td>易用</td> <td>即買即用，快速部署</td> <td>費心麻煩</td> </tr> <tr> <td>安全</td> <td>立體防禦，專業支持</td> <td>黑客入侵</td> </tr> </tbody> </table> </div>
而在這個demo中最核心的知識點就是利用colgroup上設置的border優先級較低的特色。
閱讀推薦
一站式知足電商節雲計算需求的祕訣 Web 前端性能優化 : 如何有效提高靜態文件的加載速度 白夜追兇 ：手 Q 圖片的顯示和發送邏輯
此文已由做者受權騰訊雲技術社區發佈，轉載請註明文章出處 原文連接： https://cloud.tencent.com/community/article/846600
- 1. 表格行與列邊框樣式處理的原理分析及實戰應用
- 2. Redis壓縮列表原理與應用分析
- 3. 隊列的實現原理與分析
- 4. Spring Boot實戰與原理分析
- 5. Quartz集羣實戰與原理分析
- 6. 散列表原理與應用場景
- 7. PCA原理學習及實戰應用
- 8. 【趣味設計模式系列】之【代理模式1--基本原理、實戰及框架應用】
- 9. 分佈式事務的原理分析與應用
- 10. DVR 原理解析及OpenStack中應用流表分析
- 更多相關文章...
- • MyBatis的工作原理 - MyBatis教程
- • 錯誤處理 - RUST 教程
- • Java Agent入門實戰（三）-JVM Attach原理與使用
- • ☆技術問答集錦（13）Java Instrument原理
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案