已邀請的邦友 {{ invite_list.length }}/5
box-sizing:border-box; 方便我們在設定width、height上更直觀...
以你目前需要的排版方式可以去試試看
///
<div class='content_TestTable' style='width: calc(200% + 1px) ;'>400</div>
以上這部分很重要
鬼王很慘說的200%是對的！
透過box-sizing幫忙加加減減border/padding這些東西
但是因為你要用％來設寬度！所以中間他們有1px的border的寬度要記得加上去喔～
ps
如果不清楚為何要加上1px，可以先把flex-col設一個px的寬度去做測試
再用Ｆ12去檢查一下寬度，就會知道為什麼要加上1px了
可以試試看以下的方法～
<style>
.flex-container{
display: flex;
}
.flex-col{
display: flex;
flex-direction: column;
}
.content_TestTable {
box-sizing:border-box;
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>
<!-- 外層容器要設定為 display: flex 或 inline-flex -->
<div class='flex-container'>
<div class='flex-col' style='width:40%;'>
<div class='content_TestTable'>voltage(V)</div>
<div class='content_TestTable'>Tmin(°C)</div>
<div class='content_TestTable'>Tmax(°C)</div>
<div class='content_TestTable'>Tma(°C) </div>
</div>
<div class='flex-col' style='width:30%;'>
<div class='content_TestTable'>100</div>
<div class='content_TestTable'>200</div>
<div class='content_TestTable'>300</div>
<div class='content_TestTable' style='width: calc(200% + 1px) ;'>400</div>
</div>
<div class='flex-col' style='width:30%;'>
<div class='content_TestTable'>100</div>
<div class='content_TestTable'>200</div>
<div class='content_TestTable'>300</div>
</div>
</div>
我只給你一個提示。
可視與不可視的對應。
簡單來說，你將表格相關的東西，採用可視處理。
其它的資料佈置就可以自由排放不需要給他線條。
主要要讓你看的是
<div class="table-td">
<div class="sub-table">
<div class="sub-table-tr">
<div class="sub-table-td" style="width: 40%;">台北</div>
<div class="sub-table-td" style="width: 30%;">72812</div>
<div class="sub-table-td" style="width: 30%;">8.0%</div>
</div>
</div>
</div>
表內子表的應用。
這招可以應付你的雙重資料及不定向橫向資料處理。
還可以解決你的線條問題
如果用在table上。
就是一種table包table的用法。
只是將這樣的觀念拿來給 display:table??? 相關應用
來達到像表格那樣自動對齊。
如果不想利用 display:table 應用。
你就只剩下自定義位置處理。
你會需要js或是寬度百分比化處理。
認真來說，這樣會更麻煩的。
看你的想法吧。會要你用 display:table
主要的目的就是為了你目前的情況。
如果你還是覺得得要用你的方式。你會需要更多的調整。
ps:我教你的方式，並不需要將資料重新整理的。
不要被標題的排法給騙了。標題換一下就是資料的第一項。
一樣也是可以達到目的。
好的，我鑽研一下您提供的方式，來試試看!
謝謝你耐心的看我的問題還回覆我 > <
再給你一個提示好了。
上面的部份
<div class="table-td">
<div class="sub-table">
<div class="sub-table-tr">
<div class="sub-table-td" style="width: 40%;">台北</div>
<div class="sub-table-td" style="width: 30%;">72812</div>
<div class="sub-table-td" style="width: 30%;">8.0%</div>
</div>
</div>
</div>
改成
<div class="table-td">
<div class="sub-table">
<div class="sub-table-tr">
<div class="sub-table-td">DATA1</div>
</div>
<div class="sub-table-tr">
<div class="sub-table-td">DATA2</div>
</div>
<div class="sub-table-tr">
<div class="sub-table-td">DATA3</div>
</div>
<div class="sub-table-tr">
<div class="sub-table-td">DATA4</div>
</div>
</div>
</div>
這樣看看有沒有給你啟發。
我了解了!其實就是一個<td>裡面包一個<table>!!<td>本身就是水平長資料，但<table>與<tr>本身是垂直往下的，所以利用這兩個特性就可以垂直長資料但又能獨立水平呈現了!
我的實作結果為第三個表，只剩下調整外觀樣式~
非常感謝你的指導~我通了~
已將此解法更新到發問中了~感謝 > <
這是你的程式碼
<style>
.flex-container{
display: flex;
}
.flex-col{
display: flex;
flex-direction: column;
}
.content_TestTable {
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>
<!-- 外層容器要設定為 display: flex 或 inline-flex -->
<div class='flex-container'>
<div class='flex-col' style='width:40%;'>
<div class='content_TestTable'>voltage(V)</div>
<div class='content_TestTable'>Tmin(°C)</div>
<div class='content_TestTable'>Tmax(°C)</div>
<div class='content_TestTable'>Tma(°C) </div>
</div>
<div class='flex-col' style='width:30%;'>
<div class='content_TestTable'>100</div>
<div class='content_TestTable'>200</div>
<div class='content_TestTable'>300</div>
<div class='content_TestTable' style='width:195%;'>400</div>
</div>
<div class='flex-col' style='width:30%;'>
<div class='content_TestTable'>100</div>
<div class='content_TestTable'>200</div>
<div class='content_TestTable'>300</div>
</div>
</div>
跑掉的是這個部分
<div class='content_TestTable' style='width:195%;'>400</div>
理論上它的寬度該是200%，但加上content_TestTable樣式的padding、margin、border就超過了。所以你想縮小一點改成195%，但還是對不上。
另外上次和這次已經很多前輩說過了，可以有更好的處理方式...
謝謝你的說明，其實我的資料結果若使用浩瀚星空前輩的教學，其實是會長成這樣(如連結中的下方表格)，因此需要將整個資料翻轉，但因為資料來源較複雜，會造成效能問題，後來才會選擇以目前的方式實做~
iThome鐵人賽
看影片追技術