HTML CSS，表TH和TD不在同一行

以下打開看起來TH和TD不在同一行。原因可能是因爲滾動條。如何解決這個問題，使即使滾動TD和TH將在同一行？HTML CSS，表TH和TD不在同一行

table { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
    height: 500px; /* this can vary */ 
}

https://plnkr.co/edit/fcdXKE?p=preview

來源

2016-08-04 user3249448

你試過我的編輯答案嗎？ –

入門的偏移th的，比較它的偏移td，然後設置th的margin-left財產作爲這兩個的區別應該工作。

Tested Demo：

// set id on table 
var dataTable = document.getElementById("dataTable"); 
var tableHead = dataTable.getElementsByTagName("thead")[0]; 
var headRow = tableHead.getElementsByTagName("tr")[0]; 
var tds = document.querySelectorAll('#dataTable tbody td'); 
var ths = document.querySelectorAll('#dataTable thead th'); 
for(i=0;i<tds.length;i++){ 
    var offset=tds[i].offsetLeft- ths[i].offsetLeft; 
    var thToSet = headRow.getElementsByTagName("th")[i]; 
    thToSet.style.marginLeft = offset + "px"; 
}

來源

2016-08-04 19:46:20

在tbody滾動條是減少他的寬度，而thead沒有之一。

這就是爲什麼thead中的20％寬度與tbody中的20％寬度不匹配的原因。

您可以爲在thead的tr填充，但我不知道這將是跨瀏覽器...

您也可以使用此支持的WebKit（CanIUse）的瀏覽器：

::-webkit-scrollbar { 
    display: none; 
}

對於Firefox，無法使用CSS對其進行定製，您將不得不處理jQuery（有關更多信息，請參閱thirtydot的答案）。有librarie製作漂亮的滾動條：Custom Content Scroller

來源

2016-08-04 19:01:48 Cladiuss

HTML CSS，表TH和TD不在同一行

回答

相關問題