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

asp.net mvc asp.net c# html5

anniecat 2019-09-23 17:09:56 ‧ 6245 瀏覽

分享至

不知到標題是否有符合問題，還請見諒...
目前在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>

呈現上div與table在width:100%的狀況下呈現不同(執行結果)

看更多先前的討論...收起先前的討論...

listennn08 iT邦高手 5 級 ‧ 2019-09-23 17:12:10 檢舉

因為div是區塊級

anniecat iT邦新手 3 級 ‧ 2019-09-23 17:16:27 檢舉

謝謝listennn08的回覆，那如果要使用div的話，此部分可以怎麼調整呢? 謝謝您!

listennn08 iT邦高手 5 級 ‧ 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邦高手 5 級 ‧ 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邦高手 2 級 ‧ 2019-09-23 17:40:06 檢舉

如果是根據老式table切版設定，
要作到 [固定] [變動寬度] [固定]這種table三欄式效果，
不是在變動那邊設width 100%而是，在另外二欄給固定寬度，
要讓它自己調變寬度那欄不設，例如:
[固定 width 150px] [變動不設寬度] [固定 width 150px]
但是我沒實際測試過，這只是原理提供您參考...

listennn08 iT邦高手 5 級 ‧ 2019-09-23 18:05:22 檢舉

好啊那我就來騙騙最佳解答了
有幫到你就好

ccutmis iT邦高手 2 級 ‧ 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邦高手 2 級 ‧ 2019-09-24 14:07:15 檢舉

^^不客氣～加油!

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

listennn08

iT邦高手 5 級 ‧ 2019-09-23 18:04:45

最佳解答

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

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

回應
分享
檢舉

登入發表回應

YoChen

iT邦研究生 1 級 ‧ 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;
}