数据表列标题都挤满了第一列

我试图得到一个简单的数据表网格渲染，但我发现了一个奇怪的行为。列标题看起来都塞满了第一列。数据表列标题都挤满了第一列

我知道那是因为一些造型的，因为当我删除与该类别的所有样式的问题消失被应用于类workspace-table。（我不喜欢这些风格，而且我不是很熟悉）。

有人能告诉我哪种风格打破了这个？我曾尝试删除个别课程或样式，但我没有看到问题所在。

风格：提前

.workspace-table{ 
    width: 80%; 
    margin-left: 20px; 
    border: 2px solid #C0C0C0; 
    width: 80%; 
    font-size: 11px; 
} 
.workspace-table .column-resize-icon{ 
    float: right; 
    color: gray; 
    margin-right: -4px; 
} 
.workspace-table .table-desc-width{ 
    width: 288px !important; 
} 
.workspace-table .table-dollar-format{ 
    float: right; 
    padding-right: 10px; 
} 

.workspace-table thead/*.headerText*/{ 
    color: white; 
    display: inline; 
    float: left; 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-weight: bold; 
    margin-bottom: 0; 
    padding-bottom: 0; 
    padding-right: 5px; 
    text-align: left !important; 
    text-decoration: underline; 
} 
.workspace-table tr { 
    border: 2px solid #C0C0C0; 
} 
.workspace-table th { 
    border-right: 2px solid; 
    background: #969696; 
} 
.workspace-table th .fa-sort{ 
    color: grey; 
} 
.workspace-table th .fa-sort-up{ 
    color: white; 
} 
.workspace-table th .fa-sort-down{ 
    color: white; 
} 
.workspace-table .border-right .fa{ 
    display: table-cell !important; 
} 
.workspace-table .border-right{ 
    border-right: 2px solid white; 
} 

.workspace-table > thead > tr > th, .workspace-table > tbody > tr > th, 
.workspace-table > tfoot > tr > th, .workspace-table > thead > tr > td, 
.workspace-table > tbody > tr > td, .workspace-table > tfoot > tr > td { 
    padding: 5px; 
    line-height: 1.428571429; 
    vertical-align: top; 
    border-top: 1px solid #dddddd; 
} 

.workspace-table .negative { 
    color: red; 
}

谢谢！

来源

2014-02-14 tengen

我删除显示：inliine和浮动：从.workspace表THEAD左。

它看起来像有人评论指出，CSS选择器，这可能是不适合的THEAD元素本身的一部分，但也许它的一个孩子吗？

http://jsfiddle.net/S9QXY/

.workspace-table thead/*.headerText*/{ 
    color: white; 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-weight: bold; 
    margin-bottom: 0; 
    padding-bottom: 0; 
    padding-right: 5px; 
    text-align: left !important; 
    text-decoration: underline; 
}

来源

2014-02-14 20:38:55

谢谢...原来如此！ – tengen

浮子杀死任何显示。

不浮动你的表格元素，它会呈现罚款。 jsfiddle.net/EX8LZ/18/

如说，不要么修改显示值，除非你有很好的理由:)

来源

2014-02-14 20:39:03

取出显示：内联和浮动：从您的THEAD规则左：

 

    .workspace-table thead/*.headerText*/{ 
     color: white; 
     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
     font-weight: bold; 
     margin-bottom: 0; 
     padding-bottom: 0; 
     padding-right: 5px; 
     text-align: left !important; 
     text-decoration: underline; 
}

来源

2014-02-14 20:49:01 t8tortotlover

数据表列标题都挤满了第一列

回答

相关问题