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

html5 css

anniecat 2020-07-02 14:52:04 ‧ 3062 瀏覽

分享至

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

若使用線上編輯器，則畫面呈現如下 :

若使用工具visual studioVisual(MVC C#.net的View)執行程式碼並選擇chorme瀏覽器開啟，則畫面呈現如下 :

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

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

直播中

2 個回答

rogeryao

iT邦超人 7 級 ‧ 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;">

回應 3
分享
檢舉

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