CSS不適用於滾動下div的字段

我有這個jsfiddle示例http://jsfiddle.net/AnnaMiroshnichenko/xjyb8/1/。我不明白爲什麼當我滾動div，放置在滾動下的字段不適用自己的CSS規則（爲什麼邊框和第一行的背景顏色不呈現）。我的css：CSS不適用於滾動下div的字段

.myL{ 
     background-color: #808080; 
     float:left; 
     width: 30%; 
     height: 100%; 
    } 
    .myR{ 
     background-color: pink; 
     float:right; 
     width: 70%; 
     height: 100%; 
     overflow-x: auto; 
    } 
    .myRow{ 
     white-space: nowrap; 
     height: 30px; 
     border: 1px solid white; 
    } 
    .myHedaer{ 
     background-color: #02749c; 
    } 
    .myCol{ 
     width: 80px; 
     display: inline-block; 
     text-overflow: ellipsis; 
     overflow: hidden; 
     white-space: nowrap; 
    } 
    .myFixedCol{ 
     width: 80px; 
     text-overflow: ellipsis; 
     overflow: hidden; 
     white-space: nowrap; 
    }

我將不勝感激任何幫助！

來源

2014-04-04 Telary

您可能需要添加CSS如下

DEMO

.myR .myRow {   
    min-width: 415px; /* (5 cells X 80) + 15 for text-overflow*/ 
}

來源

2014-04-04 12:44:20

謝謝您的回答！但是在真實的項目中，我不知道表中有多少列 - 因爲我基於動態數據構造了這個表。還有哪些其他技巧可以幫助我解決這個問題？ – Telary

你可能需要使用javascript來動態計算東西 - http://jsfiddle.net/xjyb8/7/你在找這樣的東西 –

這可以通過JavaScript的東西來解決這樣的

var Cols = $('.myR').children('.myRow').eq(0).find('.myCol').length; 
var constant = 80; 
var overflowVal = 15; 
var calc = (Cols * constant) + overflowVal 

/*constant and overflowVal need to be set as per data and requirement */ 

$('.myR').children('.myRow').css("min-width", calc)

來源

2014-04-07 09:35:53 AlexPrinceton

CSS不適用於滾動下div的字段

回答

相關問題