如何讓欄位自動填滿點

asp.net mvc asp.net c#

anniecat 2019-09-20 17:30:02 ‧ 1303 瀏覽

分享至

假設我在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>

希望長相:

登入發表討論

直播研討會

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

直播中

3 個回答

YoChen

iT邦研究生 1 級 ‧ 2019-09-20 18:06:35

最佳解答

style='border-top:dashed;'

回應 9
分享
檢舉

看更多先前的回應...收起先前的回應...

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>

登入發表回應

小魚

iT邦大師 1 級 ‧ 2019-09-20 17:46:31

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

回應 7
分享
檢舉

看更多先前的回應...收起先前的回應...

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

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

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, '.'));

結果如下

但是這個方式的判斷方式是字串長度,
不知道是不是你要的?

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

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

登入發表回應

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>