使用Flex 或  inline-block做table & rowspan

使用Flex 或 inline-block做table & rowspan

續上篇有人問,用inline-block做表格,接著因為資料(data)的關係,他選擇用flex來做table,但是要模擬rowspan時遇到問題,我覺得蠻有趣的,他寫的HTML跟我一般寫的Flex差蠻多的,想了想還是只有用比較粗暴的寫法來解。

原始的code

<style>
    .flex-container{
        display: flex;
    }
    .flex-col{
        flex-direction: column;
    }
    .T-Table {
        height: 20px;
        padding: 3px 3px 3px 3px;
        font-size: 10px;
        font-family: Arial;
        text-align:left;
        vertical-align: top;
        border: 1px solid ;    
        margin:-1px 0 0 -1px;
    }
</style>

<div class='flex-container'>
    <div class='flex-col' style='width:40%;'>
        <div class='T-Table'>k-h1-text</div>
        <div class='T-Table'>k-h1-text</div>
        <div class='T-Table'>k-h1-text</div>
        <div class='T-Table'>k-h1-text</div>
    </div>
    <div class='flex-col' style='width:30%;'>
        <div class='T-Table'>100</div>
        <div class='T-Table'>200</div>
        <div class='T-Table'>300</div>
        <div class='T-Table' style='width:195%;'>400</div>
    </div>
    <div class='flex-col' style='width:30%;'>
        <div class='T-Table'>100</div>
        <div class='T-Table'>200</div>
        <div class='T-Table'>300</div>
    </div>    
</div>

畫面如codepen上一樣 —–> 立即進入

用簡單暴力的解法,直接在”400″納格加上width:200%,以前這種寫法我其實不太推薦,過去的經驗這樣寫一定跑版,但..好像也沒別的更簡單的,發現學無止境

但直接用width,還是會跑版,所以這樣寫是不行的,每個尺寸線都不會對齊,所以需要修正,直接沿用他的寫法,在400那格改成calc(200% – 7px);

<div class='T-Table' style='width:calc(200% - 7px);'>400</div>

這樣寫不會跑版,又非常的簡易,以前我遇到這問題通常會把HTML重組,但看了別人的問題其實自己也學了很多,這樣寫既然不會跑版,我又何必去寫更複雜的。

例外除了Flex可以模擬Table外,最基本的inline-block其實也沒問題

<style>
.T-Table {
  height: 20px;
  padding: 3px 3px 3px 3px;
  font-size: 10px;
  font-family: Arial;
  text-align: left;
  border: 1px solid;
  margin: -1px 0 0 -1px;
}
.inline-block-container {
  font-size: 0;
}
.inline-block-col {
  display: inline-block;
  vertical-align: top;
}
</style>
<div class='inline-block-container'>
  <div class='inline-block-col' style='width:40%;'>
    <div class='T-Table'>k-h1-text</div>
    <div class='T-Table'>k-h1-text</div>
    <div class='T-Table'>k-h1-text</div>
    <div class='T-Table'>k-h1-text</div>
  </div>
  <div class='inline-block-col' style='width:30%;'>
    <div class='T-Table'>100</div>
    <div class='T-Table'>200</div>
    <div class='T-Table'>300</div>
    <div class='T-Table' style='width:calc(200% - 7px);'>400</div>
  </div>
  <div class='inline-block-col' style='width:30%;'>
    <div class='T-Table'>100</div>
    <div class='T-Table'>200</div>
    <div class='T-Table'>300</div>
  </div>
</div>

畫面如下

對於CSS來說有的是寫法,真的不用拘泥,只要遊覽器買單,那就是好的寫法。

夾尾巴

不知道甚麼端的工程師,低薪努力中

Related Posts

寫sass 新增config.rd 的方便

寫sass 新增config.rd 的方便

Swiper.js 輪播JS 套件

Swiper.js 輪播JS 套件

css-doodle 類CSS系統套件 可用來繪圖

css-doodle 類CSS系統套件 可用來繪圖

fabric.js-HTML5 Canvas 加強套件

fabric.js-HTML5 Canvas 加強套件

No Comment

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *