Question

我有这个jsfiddle示例http://jsfiddle.net/AnnaMiroshnichenko/xjyb8/1/。我无法理解为什么当我滚动div时，放在滚动下的字段不适用于自身的css规则（为什么不渲染第一行的边框和背景颜色）。我的css：

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

我将不胜感激任何帮助！

Answer 1

这可以通过这样的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)

Answer 2

您可能需要按以下方式添加css

<强> DEMO

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

CSS不适用于滚动下div的字段

2 个答案: