Question

我正在尝试使用简单的DataTable网格进行渲染，但我的行为很奇怪。所有列标题都显示在第1列上。

我知道这是因为某些样式应用于类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;
}

提前致谢！

Answer 1

我删除了display：inliine和float：from .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

float会杀死任何显示。

不要浮动你的表格元素，它会渲染得很好。 jsfiddle.net/EX8LZ/18/

如上所述，除非你有充分的理由，否则不要修改显示值：）

Answer 3

从你的thead规则中取出显示：inline和float：left：


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

DataTables列标题都塞满了第一列

3 个答案: