iT邦幫忙

1

使用div模擬table所產生的比例問題

不知到標題是否有符合問題,還請見諒...
目前在View上使用div模擬table,想詢問在width:100%;的呈現上,為什麼會是均分,而不是像table一樣依據比例去呈現呢?
此部分找了好久還未找到解法,不知道可以怎麼調整呢?

目前div的Html與CSS:

    <div class='div_table'>
        <div class='div_tr'>
            <div class='div_td'>title</div>
            <div class='div_td' style='width:100%;border-top:none;'></div>
            <div class='div_td'>content</div>
        </div>
    </div>
<style>
	div {
		width: 100%;
		overflow-wrap: break-word;
	}

	.div_table {
		display: table;
		width: 100%;
		table-layout: fixed;
		overflow-wrap: break-word;
	}

	.div_tr {
		display: table-row;
	}

	.div_td {
		display: table-cell;
		height: 10px;
		border-collapse: collapse;
		padding: 3px 3px 3px 3px;
		border: solid windowtext 0.5px;
		font-size: 10px;
		font-family: Arial;
		text-align: left;
		vertical-align: top;
	}
</style>

目前table的Html:

  <div class='div_table'>
    <div class='div_table'>
        <div class='div_tr'>
    
        <div class='div_td' style='border-right:none;border-top:none;'>
            title
        </div>
    
        <div class='div_td' style='width:100%;'>
            something here...
        </div>
            
        <div class='div_td' style='border-left:none;border-top:none;'>
            content
        </div>
    </div>
</div>

呈現上divtablewidth:100%的狀況下呈現不同(執行結果)
https://ithelp.ithome.com.tw/upload/images/20190923/20115336nPLXe9ISvt.jpg

看更多先前的討論...收起先前的討論...
listennn08 iT邦研究生 3 級 ‧ 2019-09-23 17:12:10 檢舉
因為div是區塊級
anniecat iT邦新手 3 級 ‧ 2019-09-23 17:16:27 檢舉
謝謝listennn08的回覆,那如果要使用div的話,此部分可以怎麼調整呢? 謝謝您!
listennn08 iT邦研究生 3 級 ‧ 2019-09-23 17:21:46 檢舉
我剛剛沒看清楚@@
真正的原因是你在style已經設置div 都是100%了所以才會均分
在其他div也加上寬度比例 應該可以達成你的需求
anniecat iT邦新手 3 級 ‧ 2019-09-23 17:29:08 檢舉
謝謝listennn
因為希望呈現在整個畫面上的,所已將div設定為100%
如果將它拿掉以後,執行結果 : http://jsfiddle.net/pkoc8q5z/
但希望呈現的是向table長相的那樣(依據title與content去長中間那欄)
所以才將中間那欄設定為`width:100%;`,前後兩欄都不給定寬度
listennn08 iT邦研究生 3 級 ‧ 2019-09-23 17:34:46 檢舉
妳可以最外面的div設id用id指定100%
div 如果不給定寬度也不會長得跟table一樣 所以要給最少的寬度 用相對比例去給
anniecat iT邦新手 3 級 ‧ 2019-09-23 17:39:03 檢舉
可以了!感謝您的幫忙~您要直接回應我再選您為最佳解答嗎?
http://jsfiddle.net/1tsu2o9e/
ccutmis iT邦高手 8 級 ‧ 2019-09-23 17:40:06 檢舉
如果是根據老式table切版設定,
要作到 [固定] [變動寬度] [固定]這種table三欄式效果,
不是在變動那邊設width 100%而是,在另外二欄給固定寬度,
要讓它自己調變寬度那欄不設,例如:
[固定 width 150px] [變動不設寬度] [固定 width 150px]
但是我沒實際測試過,這只是原理提供您參考...
listennn08 iT邦研究生 3 級 ‧ 2019-09-23 18:05:22 檢舉
好啊 那我就來騙騙最佳解答了
有幫到你就好
ccutmis iT邦高手 8 級 ‧ 2019-09-24 11:50:24 檢舉
已經有最佳解答那我就在這邊補充了,
我把昨天寫的建議拿來練手寫了一個範例,給樓主參考:
http://www.web3d.url.tw/ITHELP/CSS_20190923/

(太久沒接觸網頁切版了,幾乎忘了table排版是怎麼回事)
最後還是要建議您,如果不是特殊情況該用表格就用表格,
我指的特殊情況例如你到一家新公司上班,該公司網站是15年前用表格切版的,活到現在還沒換過(這很奇杷但還是有),主管要你維持原樣但是把table換成div之類的。其它正常情況你應該自行判斷何時該用table何時該用div。
(用div模擬table通常會在 colspan 跟 rowspan 這邊卡關)

另外一個小建議,如果已經會用css了,
重覆性的內容不要寫在style裡面,要用css跟class去處理,
例如:
.w20pct{ width:20%;}
某html <div class="w20pct">....
養成習慣後你在維護程式的時候才不會需要到處找style='...'; 來改,數量多的時候很恐怖的...
anniecat iT邦新手 3 級 ‧ 2019-09-24 13:59:31 檢舉
ccutmis,您說的維護上的困難已瞭解,並且做調整,您寫的三種我也看完了,真的很謝謝您的幫忙!
ccutmis iT邦高手 8 級 ‧ 2019-09-24 14:07:15 檢舉
^^不客氣~加油!

2 個回答

2
listennn08
iT邦研究生 3 級 ‧ 2019-09-23 18:04:45
最佳解答

妳可以最外面的div設id用id指定100%

div 如果不給定寬度也不會長得跟table一樣 所以要給最少的寬度 用相對比例去給

4
YoChen
iT邦研究生 5 級 ‧ 2019-09-23 18:01:27

您可以打開瀏覽器的開發者模式
將<Table>、<tr>、<td>標籤的必要屬性加入您的css中
簡易範例如下

HTML
<table>
  <tr>
    <td>title</td>
    <td>something here...</td>
    <td>content</td>
  </tr>
</table>

<div class='div_table'>
  <div class='div_tr'>
    <div class='div_td'>title</div>
    <div class='div_td'>something here...</div>
    <div class='div_td'>content</div>
  </div>
</div>
CSS
table{
  width: 100%;
}

.div_table {
  width: 100%;
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
}

.div_tr {
  display: table-row;
}

.div_td {
  display: table-cell;
  padding: 1px;
}
Output

imgur

anniecat iT邦新手 3 級 ‧ 2019-09-25 10:46:54 檢舉

感謝YoChen的幫忙~注意到了這個屬性border-collapse: separate;,調整成border-collapse: collapse;我就不用一個一個去調整框線了(border-right:none),謝謝!

我要發表回答

立即登入回答