寬度內的跨度

我有表跨度元素第。我想跨越寬度匹配日，但實際上它填補了整個行:(寬度內的跨度

我的代碼：

for (var i = 0; i < testInfoFieldsNames.length; i++) { 
     title = testInfoFieldsNames[i].toLowerCase(); 

     th = $('<th></th>'); 
     span = $('<span></span>').addClass('cell-container').text(title); 
     th.append(span); 
    } 

    tableHeader.append(th);

CSS：

.cell-container { 
    position: absolute; 
    display: block; 
    top: 5px; 
    left: 0; 
    width: 100%; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
}

我怎樣才能設置跨度，以填補 th only？

來源

2016-11-21 rk fred

你的跨度看起來很像一個'div' –

內那是一個'div'變量'span'，你確定這是正確的？ –

@RoryMcCrossan你的美麗！ – ScanQR

，我認爲你應該給個類似的風格：

th{ 
    position:relative; 
}

來源

2016-11-21 10:26:41 JKong

謝謝！這確實解決了這個問題！你知道解釋爲什麼嗎？ –

不要留下元素的空間。相反，將其定位在相對於其最接近的定位祖先（如果有的話）的指定位置，或者相對於初始包含塊。絕對放置的盒子可以有邊距，並且不會與其他邊緣合併。 – JKong

@rkfred [https://developer.mozilla.org/en-US/docs/Web/CSS/position]你可以在這個網頁找到答案 – JKong

請試試這個我認爲這對你有用

請這個例子link

for (var i = 0; i < testInfoFieldsNames.length; i++) { 
     title = testInfoFieldsNames[i].toLowerCase(); 

     th = $('<th><span class="cell-container">'+title+'</span></th>'); 
    } 

    tableHeader.append(th);

CSS

span.cell-container { 
    display: block; 
    top: 5px; 
    left: 0; 
    width: 100%; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
}

來源

2016-11-21 09:52:51

謝謝你的回答。它的工作方式就像上面的代碼一樣..它確實在'span'中附加了'th'。但span仍填滿整行而不是單元格。 –

@rkfred問題出在CSS位置標記上，請將其移除或替換爲「position：relative;」 –

@rkfred其工作請編輯CSS，並嘗試和更多的細節去附加的鏈接 –

-1

標籤 '跨度' 是行內元素。它沒有寬度和高度。您應該使用「格」或設置以下屬性

display:block;

來源

2016-11-21 10:10:01

謝謝！我確實在我的CSS中使用了這個屬性，但是跨度寬度仍然填滿整行。 –

寬度內的跨度

回答

相關問題