Заголовки столбцов DataTables все переполнены 1-й колонкой

Question

Я пытаюсь получить простую сетку DataTable для рендеринга, но я получаю странное поведение. Заголовки столбцов выглядят переполненными по 1-й колонке.

Я знаю, что это связано с тем, что какой-то стиль применяется к классу workspace-table, потому что когда я удаляю все стили, связанные с этим классом, проблема исчезает. (Я использовал стили, и я не очень грамотный).

Может ли кто-нибудь сказать мне, какой стиль нарушает это? Я попытался удалить отдельные классы или стили, но я не вижу, в чем проблема.

fiddle!

стили:

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

Заранее спасибо!

Answer 1

Я удалил дисплей: inliine и float: слева от .workspace-table 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; 
} 

Answer 2

поплавок убивает любой дисплей.

Не плавайте ваши элементы стола, и он будет выглядеть отлично. jsfiddle.net/EX8LZ/18/

как сказано, не либо изменить отображаемые значения, если у вас есть хороший повод :)

Answer 3

Выньте дисплей: встроенный и поплавок: слева от вашего правила 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; 
}