使用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來說有的是寫法，真的不用拘泥，只要遊覽器買單，那就是好的寫法。