Question

这不是一个问题，它是一个解决方案，但也许你们中的某个人可以解释为什么会这样。我使用div构建了一个表（带有white-space = nowrap的行包装器和带有display = inline-block的单元格）。标题行和表的其余部分位于两个具有不同ID的不同容器div中。

代码如下：

<div id="main_container">
  <div id="header_wrapper">
    <div id="header_row">
      <div class="column_cell1">...</div> 
      <div class="column_cell2">...</div>
      ...other cells...
    </div>
  </div> --closed the header container
  <div id="table_content_wrapper">
    <div id="table_row">
      <div class="column_cell1">...</div> 
      <div class="column_cell2">...</div>
      ...other cells identical classes as the header...
    </div>
     ...several other table rows...
  </div> --closed the table container
</div> --closed the main container

CSS看起来像：

#header_wrapper {
position:absolute;
top:100px;
height:100px;
width:100%;
}

#table_content_wrapper {
position:absolute;
top:200px;
bottom:0;
width:100%;
}

#header_row {
height:100%;
white-space:nowrap;
}

#column_row {
height:100px;
white-space:nowrap;
}

.column_cellN (all equal) {
height:100%;
width:10%;
display:inline-block;
white-space:normal;
}

无论我做了什么，标题单元格和表格行单元格都未对齐。唯一的方法（在大量试验之后）使它们看起来相同的方法是将相同的div ID分配给标题行包装器和表行包装器。

最奇怪的是，chrome中的开发人员工具报告标题和表格中的各个单元格在像素中具有相同的宽度，但实际上它们在浏览器中呈现的方式不同。在IE中也有相同的行为。

有人知道为什么会这样吗？

Answer 1

适合我。

http://jsfiddle.net/UMf3k/2/

更正你的css：#header_wrapper {position:relative;}

div的水平对齐方式不同

1 个答案: