HTML (index.html)：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW" xml:lang="zh-TW"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name=viewport content="width=device-width, initial-scale=1"><title>TableBoxy</title><style>.css_fieldset { /*框架*/ padding: 10px; border-style: solid; border-width: 1px; border-color: #000000;}.css_legend { /*框架標題*/ float: left; background: #fff; margin-top: -20px; padding: 0 10px;}.css_tablebox { /*表格框架*/ clear: both; overflow-x: auto;}.css_table { /*表格*/ border-collapse: collapse; display: table;}.css_tr { /*橫列*/ padding: 3px; display: table-row;}.css_th { /*標題欄位*/ padding: 5px; border-style: solid; border-width: 1px; border-color: #000000; display: table-cell; font-weight: bold; white-space: nowrap;}.css_td { /*一般欄位*/ padding: 5px; border-style: solid; border-width: 1px; border-color: #000000; display: table-cell; white-space: nowrap;}.css_colspan { /*表格合併欄位*/ border-left-style: solid; border-top-style: solid; border-bottom-style: solid; border-left-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-color: #000000; display: table-cell; white-space: nowrap;}.css_colspan_text { /*文字欄位*/ width: 0px; padding: 5px; position:relative;}.css_colspan_blank { /*中間空欄位*/ border-top-style: solid; border-bottom-style: solid; border-top-width: 1px; border-bottom-width: 1px; display: table-cell;}.css_colspan_last { /*最後欄位*/ border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-color: #000000; display: table-cell;}</style></head><body><div class="css_fieldset"> <div class="css_legend">標題</div> <div class="css_tablebox"> <div class="css_table"> <div class="css_tr"> <div class="css_th">標題</div> <div class="css_th">日期</div> <div class="css_th">回應</div> </div> <div class="css_tr"> <div class="css_td">今天晚餐吃少一點吧</div> <div class="css_td">2015-05-05</div> <div class="css_td">5</div> </div> <div class="css_tr"> <div class="css_colspan"> <div class="css_colspan_text">宵夜不吃了，早點回家睡覺比較實際。</div> </div> <div class="css_colspan_blank"></div> <div class="css_colspan_last"></div> </div> <div class="css_tr"> <div class="css_td">今天早餐到底要吃什麼好呢?</div> <div class="css_td">2015-05-06</div> <div class="css_td">3</div> </div> <div class="css_tr"> <div class="css_td">作者</div> <div class="css_colspan"> <div class="css_colspan_text">QQBoxy</div> </div> <div class="css_colspan_last"></div> </div> </div> </div></div></body></html> |
範例：
標題
標題
日期
回應
今天晚餐吃少一點吧
2015-05-05
5
宵夜不吃了，早點回家睡覺比較實際。
今天早餐到底要吃什麼好呢?
2015-05-06
3
作者
QQBoxy
於新視窗開啟檢視效果：http://output.jsbin.com/kagobamopi
說明：
使用div建構具有合併欄位(colspan)的表格效果，
並且建構div分組fieldset、legend能在行動裝置自適應顯示過長內容。
