iT邦幫忙

2

為何連續貼上一橫列的html就會發生框線變粗的狀況呢?

我想要呈現每列不同數量的表格,因此用div模擬table實作,實作程式碼請點選,目前有一個很困擾的地方,不管使用margin或是border-top:none; border-bottom:none; ,都沒有辦法將中間的框線合併,只呈現一條,想詢問可以怎麼處理呢? 謝謝!
而且,為什麼連續的貼上一橫列的html就會偶發上述狀況,而且若以下兩個方式呈現,則呈現不同的樣子呢?
另外,有嘗試過使用table的標籤來作業,也發現有一樣的狀況,為了可能出現不同欄位數量的橫列的狀況發生,目前採用div的方式,會比較有彈性。

若使用線上編輯器,則畫面呈現如下 :
https://ithelp.ithome.com.tw/upload/images/20200702/20115336vNr3TvetYZ.png

若使用工具visual studioVisual(MVC C#.net的View)執行程式碼並選擇chorme瀏覽器開啟,則畫面呈現如下 :
https://ithelp.ithome.com.tw/upload/images/20200702/20115336GSQqqbSpHc.png

看更多先前的討論...收起先前的討論...
Franky Chen iT邦研究生 3 級 ‧ 2020-07-02 21:54:14 檢舉
>Visual studio執行程式碼
html不能說用visual studio執行吧......
anniecat iT邦新手 3 級 ‧ 2020-07-03 09:24:14 檢舉
我是用MVC C#.net的View做的,然後工具是使用visual studio,所以才會這樣打,不知道修正後OK嗎? 或是有更好的說法嗎?
a500197 iT邦新手 5 級 ‧ 2020-07-03 09:32:06 檢舉
VS的測試開出來的頁面可以選哪個瀏覽器吧
anniecat iT邦新手 3 級 ‧ 2020-07-03 10:19:10 檢舉
對,可以選擇~
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
rogeryao
iT邦超人 8 級 ‧ 2020-07-02 17:31:37
最佳解答
    .div_table {
        display:table;
        width:17cm;
        border-collapse:collapse;
        border-spacing:2px;
        // border:solid windowtext 1px;
        margin:-1px 0;
    }
第一個 
<div class="div_table" style="border-top : solid windowtext 1px;">
咖咖拉 iT邦好手 1 級 ‧ 2020-07-02 17:52:30 檢舉
.div_td {
    display: table-cell;
    overflow: hidden;
    height: 20px;
    padding: 3px 3px 3px 3px;
    border: solid windowtext 1px;
    font-size: 10px;
    font-family: Arial;
    text-align: left;
    vertical-align: top;
    /* border-top: none; */
}

border-top: none; 也順便拿掉吧XD

rogeryao iT邦超人 8 級 ‧ 2020-07-02 18:14:13 檢舉

border-top:none; 不用動

anniecat iT邦新手 3 級 ‧ 2020-07-03 10:18:29 檢舉

實作後已解決問題,原來表格之間的框線控制可以這麼做,謝謝您們的幫忙!

2
listennn08
iT邦高手 5 級 ‧ 2020-07-02 14:58:25

我開你的 demo 看起來很正常
(ie 11, edge 44, chrome 83, firefox 77)
不過如果不要格線重複可以使用

border-collapse: collapse;

我也有看到你在 .div_table 上使用

看更多先前的回應...收起先前的回應...
anniecat iT邦新手 3 級 ‧ 2020-07-02 15:20:36 檢舉

對呀,其實都有使用,但不知道為何,我執行後的程式碼,就會是發問中的樣子...我已經跟他奮鬥很久了/images/emoticon/emoticon02.gif

可以看看會不會是 cache 的問題

anniecat iT邦新手 3 級 ‧ 2020-07-02 16:40:36 檢舉

很謝謝你的幫忙~有清過了,不過還是會有一樣的狀況...

感覺單純是因為兩個是獨立物件, 縮放時造成物件間距離有小數點誤差造成的, 可以試著放大縮小瀏覽器的比例看看, 以我的電腦來說, Win10內建的放大我設125%, 畫面上瀏覽器設定成80%看到就是正常的

我要發表回答

立即登入回答