iT邦幫忙

1

如何讓<table>的寬度符合外層<div>的定義,且能依照<td>內容自動設定欄寬

目前希望實作出,外框<div>設定寬度(目前為17cm),裡面的表格<table>的寬度可以符合外框<div>設定的寬度,且可以依據<td>內容找到符合的寬度,但是目前實作了以下兩種方式,都無法同時滿足兩個需求,不知道還可以怎麼調整呢?

  1. 若實作的方式不去設定寬度,確實可以讓表格寬度依照內容而去找到適合的寬度,但卻無法符合外框制定的寬度,如實作程式碼

  2. 若實作的方式給予裡面的表格寬度為width:100%width:inherit,確實可以讓寬度符合外框所訂的,但是表格內的寬度卻是均分,無法依照內容去制定寬度,如實作程式碼

這個你要先做 css 歸零才行,不然不同瀏覽器table標籤的邊界留白是不同的
所以要先把你會用到的全部歸零,然後再去指定你需要的寬度
anniecat iT邦新手 3 級 ‧ 2020-06-17 16:29:26 檢舉
請問歸零是什麼意思呢?
ccutmis iT邦高手 8 級 ‧ 2020-06-17 17:18:24 檢舉
google 'css reset'
2
listennn08
iT邦高手 9 級 ‧ 2020-06-17 16:39:57
最佳解答

把欄位的所有寬度拿掉 table 一樣 100%
拿掉 table-layout:fixed; 然後

.content {
    /* 省略... */
    white-space: nowrap;
 }
看更多先前的回應...收起先前的回應...
anniecat iT邦新手 3 級 ‧ 2020-06-17 17:03:13 檢舉

看起來是這個屬性影響的,嘗試過後已成功,感謝您的協助!
本來是想說加上這個屬性,可以讓效率變好,結果導致寬度的問題產生...

anniecat iT邦新手 3 級 ‧ 2020-06-17 17:29:18 檢舉

不好意思,可以延伸發問嗎?
若是換成div模擬table的部分,我發現他會超出長度,不知道可以怎麼調整呢?

通靈亡 iT邦研究生 5 級 ‧ 2020-06-17 17:44:59 檢舉

anniecat 給最大寬度,設定文字超出時自動強制換行

.div_td_pad {
    max-width: 300px;
    overflow-wrap: break-word;
}

https://ithelp.ithome.com.tw/upload/images/20200617/20120331Zlr7Wj3KZn.png

上面大大說的沒錯加最大寬度就行了

anniecat iT邦新手 3 級 ‧ 2020-06-18 11:24:58 檢舉

謝謝通靈亡listennn08的幫忙,目前在實作上已成功~

2
通靈亡
iT邦研究生 5 級 ‧ 2020-06-17 16:37:03

外框設定寬度(目前為17cm),裡面的表格的寬度可以符合外框設定的寬度,且可以依據內容找到符合的寬度

我沒理解錯的話
你希望外框的寬度要是17公分,又希望外框的寬度根據表格的欄位內容伸縮???

再來關於你的第二點:

但是表格內的寬度卻是均分,無法依照內容去制定寬度

我修改欄位A的 width寬度 結果有改變阿,其他欄位均分後總寬度=17公分
不然你其他的寬度是要給誰???

<td class='grayTitle' style='width:1cm;'>A</td>
看更多先前的回應...收起先前的回應...
anniecat iT邦新手 3 級 ‧ 2020-06-17 16:59:43 檢舉

外框設定寬度(目前為17cm)->因為希望之後裡面不管放了多少表格,不管寬度超過或沒超過,都要符合最外面定義的寬度17cm

希望外框的寬度根據表格的欄位內容伸縮 -> 不是,是希望裡面的表格可以依據自身的定義,或是內容長度,而有最適合寬度

我修改欄位A的 width寬度 結果有改變阿->請問是用哪一個版本改的呢?因為像我第二個版本的話,我有欄位是給定寬度的,但並沒有變化...

anniecat iT邦新手 3 級 ‧ 2020-06-17 17:01:30 檢舉

謝謝您的幫忙!
依據您更新的內容,若應用到我想達到的,便會是F欄位應該要比較寬,因為其內容較多,而C欄位其實我有給定寬度,但卻沒有依照我給定的寬度去長。

通靈亡 iT邦研究生 5 級 ‧ 2020-06-17 17:04:35 檢舉

我修改欄位A的 width寬度 結果有改變阿->請問是用哪一個版本改的呢?因為像我第二個版本的話,我有欄位是給定寬度的,但並沒有變化...

我用第二個改的
https://ithelp.ithome.com.tw/upload/images/20200617/201203314XvY7Qlfa7.png

anniecat iT邦新手 3 級 ‧ 2020-06-17 17:10:14 檢舉

好的,不過C欄位若一樣給予寬度的話,則無變化,後來使用listennn08已可達到目標,感謝您!

通靈亡 iT邦研究生 5 級 ‧ 2020-06-17 17:15:48 檢舉

有解決就好
不過...我這邊調整C欄位也有作用

https://ithelp.ithome.com.tw/upload/images/20200617/20120331RUBSZ8YUOq.png

3
浩瀚星空
iT邦超人 1 級 ‧ 2020-06-17 16:53:28

歸零CSS或是叫reset css
以下是基本的

因為不同瀏覽器的預設寬度有各自的解讀。
最好先做一下reset再開始重新定義。

我個人還會對img做去框線去寬度的定義。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

基本上你的問題因都是預設寬度造成的。
所以先做如上的處理。理論上你的問題就可以解決。

另外一招 listennn08 有說到,掛件定位處理。
單一物件這樣子做沒問題,多重物件則並不太好。容易被干擾

anniecat iT邦新手 3 級 ‧ 2020-06-17 17:07:59 檢舉

好的,謝謝您的說明!
不知道實作的方式會是這樣嗎?

我要發表回答

立即登入回答