1

这不是一个问题，而是一个解决方案，但也许你们中的某个人可以解释为什么会发生这种情况。我使用 div 构建了一个表格（行包装器带有空白=nowrap，单元格带有显示=内联块）。标题行和表格的其余部分位于具有不同 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 中也有相同的行为。

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

4

1 回答 1

0

为我工作。

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

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

于 2013-06-27T20:20:56.077 回答