iT邦幫忙

0

如何讓欄位自動填滿點

  • 分享至 

  • xImage

假設我在View上有一個table,我希望在欄位中可以自動補滿點.,目前尚未想到方法,請問可以怎麼做,或是有什麼方向可以參考呢?

    <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>

希望長相:
https://ithelp.ithome.com.tw/upload/images/20190920/20115336otjVUrd1Pl.jpg

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
YoChen
iT邦研究生 1 級 ‧ 2019-09-20 18:06:35
最佳解答
style='border-top:dashed;'
看更多先前的回應...收起先前的回應...
anniecat iT邦新手 3 級 ‧ 2019-09-20 18:12:28 檢舉

謝謝YoChen,不好意思,我剛剛問題沒有定義清楚,已更新問題,謝謝!

YoChen iT邦研究生 1 級 ‧ 2019-09-21 11:56:00 檢舉

您可以在裡面加一層div

<div class='div_td'>
    <div style="border-top:dashed; position:relative; top:50%;"></div>
</div>
anniecat iT邦新手 3 級 ‧ 2019-09-23 09:30:03 檢舉

YoChen,目前嘗試的結果不會呈現.,但還是很感謝您的幫忙!

犬千賀 iT邦新手 3 級 ‧ 2019-09-23 09:43:09 檢舉

anniecat 你的範例多了一層 div_td

YoChen iT邦研究生 1 級 ‧ 2019-09-23 09:45:04 檢舉

加一層就好了,妳加到兩層了~XDD
範例: CodePen
Imgur

YoChen iT邦研究生 1 級 ‧ 2019-09-23 09:46:37 檢舉

另外,css檔案裡不用另外寫<style>標籤哦~

anniecat iT邦新手 3 級 ‧ 2019-09-23 14:21:55 檢舉

謝謝犬千賀和YoChen,我調整以後確實可以呈現-了,只是因為有指定要放的是.,以及擔心欄位寬度在不一定的狀況下,可能會有不符合的狀況,我會再繼續研究這部分,謝謝你們!

YoChen iT邦研究生 1 級 ‧ 2019-09-23 14:48:34 檢舉

抱歉,我自己是因為覺得"-"比較好看所以把他調整成dashed,如果您要呈現的是".",可以把

border-top:dashed;

修改為

border-top:dotted;

範例及結果如下,
Codepen
imgur


另外,由於是針對div標籤做外觀設計,只要您沒有刻意寫死div的width,他都可以動態的增長/縮短

anniecat iT邦新手 3 級 ‧ 2019-09-24 13:41:49 檢舉

YoChen謝謝您的幫忙!目前嘗試此方法,調整成這樣,就會很像了~

<div style="border-bottom:1.5px dotted; position:relative; top:100%;"></div>
2
小魚
iT邦大師 1 級 ‧ 2019-09-20 17:46:31

是我的國文不好嗎?
什麼叫做自動補滿點?

看更多先前的回應...收起先前的回應...
ccutmis iT邦高手 2 級 ‧ 2019-09-20 17:57:25 檢舉

麻倉葉跟我說他講的是寬度或高度自動調整的樣子,
不過我比較想問的是如果要以表格呈現,為何不用table就好,
反而繞了一圈用div.table div.tr div.td 這種千層派包法...
/images/emoticon/emoticon77.gif

anniecat iT邦新手 3 級 ‧ 2019-09-20 18:12:08 檢舉

此部分也可以使用table就好,只是舉例使用div,是因為原程式有定位的關係,已更新問題,謝謝!

ccutmis iT邦高手 2 級 ‧ 2019-09-20 18:57:34 檢舉

可惡,麻倉葉破功了...

小魚 iT邦大師 1 級 ‧ 2019-09-20 20:11:42 檢舉

如果你是要固定寬度,
少於寬度的使用.的話,
可以這樣

string str = "Hello";
Console.WriteLine(str.PadLeft(10, '.'));

結果如下
https://ithelp.ithome.com.tw/upload/images/20190920/201056940geDFbcikM.png
但是這個方式的判斷方式是字串長度,
不知道是不是你要的?

anniecat iT邦新手 3 級 ‧ 2019-09-22 17:25:18 檢舉

謝謝小魚的回覆,目前的狀況是,在一定的寬度下,欄位中是空的,但是希望補滿.,目前尚未找到相關依據寬度計算要補多少.的方法,還是很謝謝您的幫忙,因為在有字串的狀況下您的方法是可行的!

小魚 iT邦大師 1 級 ‧ 2019-09-22 17:41:14 檢舉

即使沒字串這方法也是可行的,
寬度的話就用字數去換算吧...

anniecat iT邦新手 3 級 ‧ 2019-09-23 09:33:24 檢舉

因為欄位內沒有任何位元(數字、字串),所以還在研究要怎麼去做計算...謝謝您!

2
ccutmis
iT邦高手 2 級 ‧ 2019-09-20 18:51:37

參考看看...
demo url: http://www.web3d.url.tw/ITHELP/CSS_20190920/
source:

<html>
<head>
<meta charset="utf-8"/>
<style>
*{margin:0;padding:0}

.div_tr{display:flex;height:100vh;}
.div_td{border:solid 2px #f00;background:#aaa;padding:10px;}
.div_td_noContent{width:100%;background:#ccc;overflow:hidden;}
.div_td_noContent:before{
margin-left:-50px;
content:
'........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................';
}
</style>
</head>
<body>
<div class='div_table'>
    <div class='div_tr'>
    
        <div class='div_td'>
            title
        </div>
		<!--//我希望在這一欄可以自動補滿點 .-->
        <div class='div_td div_td_noContent'></div>
        
        <div class='div_td'>
            content
        </div>
    </div>
</div>
</body>
</html>
anniecat iT邦新手 3 級 ‧ 2019-09-23 09:31:31 檢舉

感謝ccutmis您的幫忙,目前您的方法嘗試後是可行的!
只是會擔心欄位寬度不一定的狀況下,可能此方法會有不符合的狀況,我再繼續研究這部分,謝謝!

ccutmis iT邦高手 2 級 ‧ 2019-09-23 09:33:17 檢舉

不客氣~加油! :)

我要發表回答

立即登入回答