HTML布局-使单独表格中的单元格尺寸匹配出身背景_Html_Css_Layout_Datatables_Html Table

HTML布局-使单独表格中的单元格尺寸匹配出身背景

html css layout datatables

HTML布局-使单独表格中的单元格尺寸匹配出身背景,html,css,layout,datatables,html-table,Html,Css,Layout,Datatables,Html Table,我试图克隆表的一部分，并将克隆覆盖在原始表的顶部，以便在滚动时创建固定在页面上的标题。我正在使用jQuery插件：一个经过修改的版本来实现这一点。我试过了，但没有按我想要的方式工作除了克隆的表不能与源表正确对齐之外，我已经完成了上述工作。e、 g.顶部标题的单元格比实际表格中的单元格窄我尝试过像最初的FixedHeader代码那样设置单元格的宽度，但这似乎没有任何效果。此外，如果在Firebug的布局选项卡中手动设置宽度，它会更新HTML视图中元素中的style=width:blah，但实际

我试图克隆表的一部分，并将克隆覆盖在原始表的顶部，以便在滚动时创建固定在页面上的标题。我正在使用jQuery插件：一个经过修改的版本来实现这一点。我试过了，但没有按我想要的方式工作

除了克隆的表不能与源表正确对齐之外，我已经完成了上述工作。e、 g.顶部标题的单元格比实际表格中的单元格窄

我尝试过像最初的FixedHeader代码那样设置单元格的宽度，但这似乎没有任何效果。此外，如果在Firebug的布局选项卡中手动设置宽度，它会更新HTML视图中元素中的style=width:blah，但实际上不会更改单元格的宽度

问题如何设置第二个表格中单元格的宽度以匹配原始表格中单元格的宽度，以便在将第二个表格放置在第一个表格的顶部时它们对齐

对于上面的一个简单的版本，考虑下面的代码。尽管我已经在两个表中明确设置了前两个第元素的宽度，但第二个表的单元格太窄了。我不想在原始表中指定单元格的宽度。我只想将第二个表中单元格的宽度设置为与第一个表匹配。我该怎么做

<html>
  <head>
    <title>Layout</title>
<style type="text/css">
td, th {
    text-align: center;
    border: 1px solid #bbb;
    padding: 0px 1px;
    font-size: 1.2em;
    color: #555;
}
th {
    font-weight: normal;
}
th.colhead {
    background-color: #ccc;
}
th.reference {
    white-space: nowrap;
    font-size: 100%;
}
th.rowhead {
    white-space: nowrap;
    text-align: left;
    padding: 0px 0px 0px 10px;
}
th.cathead {
    text-align: left;
    background-color: #ddd;
    padding: 0px 0px 0px 6px;
    font-weight: bold;
}
tr {
    height: 31px;
}
tr.even {
    background-color: #eee;
}
</style>
  </head>
<body>
  <div id="source">
    <table>
      <thead>
        <tr>
          <th class="colhead" style="width:156px">Test Name</th>
          <th class="colhead" style="width:102px">Reference Range</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="rowhead">This is the test</th>
          <th class="rowhead">123 - 456</th>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>0</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="thead_clone">
    <table>
      <thead>
        <tr>
          <th class="colhead" style="width:156px">Test Name</th>
          <th class="colhead" style="width:102px">Reference Range</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
          <th class="colhead">26-07-2011 15:58</th>
        </tr>
      </thead>
    </table>
  </div>
</body>
</html>

编辑：我发现对于上面的代码，将第二个表的宽度设置为与第一个表相同可以解决问题，但在我的实际代码中，单元格的宽度仍然是错误的。如何找出问题所在以及如何解决问题？

在您的示例中，您在第一个表中以精确的宽度设置了两列。这会导致第二个表的前两列变得“太窄”，因为它们的宽度是相对的，而不是绝对的，因此浏览器会计算它们与其他列相比的宽度

您的选择很简单：将两个表列都设置为精确的宽度，或者两个表列都不设置宽度。否则，总会有分歧。如果两个标题列都没有，则标题列的宽度也取决于它们下面行中单元格的宽度，这取决于它们中的内容。这意味着要么不使用确切的宽度，必须使两个表在内容上完全相同，这样两个表就完整了，要么为这两个表都指定确切的列宽，在这种情况下，只能使用第二个表的标题行

如果我必须处理这个问题，我会说生成一个表并使用jQuery或MooTools生成重复的标题列。因此，您可以查询DOM、复制、粘贴、设置宽度。

几个月前我遇到过同样的问题，但找不到任何简单的解决方案……使用jQuery插件会是一种选择吗？而且比关于jQuery插件的问题更广泛的是，使用JavaScript可以吗？如果没有JS，我不认为有解决方案。是的，我目前正在使用datatables.net jQuery插件和FixedHeader extra，我已经修改了它，冻结左侧的2列，而不是1列，以及冻结左上角的单元格。JS/jQuery，或者我已经测试了很多这些解决方案，如果你想要像素精度，它很糟糕。列宽将根据单元格内容而变化，即使您对每一列使用固定的宽度。谢谢，正如我在问题结束时所说的，我不想在第一个表中指定单元格的确切宽度。我确实希望查询dom并设置第二个表中单元格的宽度，以便它们与第一个表匹配。然而，当我尝试这样做时，无论是使用Firebug手动编辑宽度，还是在我的黑客版本中使用Javascript，实际上都不会改变第二个表中单元格的宽度。您可以设置一个JSFIDLE来更好地说明这一点吗？因为html+css确实没有显示这一点。我一直在用MooTools做一些奇特的定位/克隆工作，像素上有一些差异，但我总能解决它们，因为它们是边框、填充等的结果。-css样式，一般来说。是的，js摆弄它，它应该会改变宽度。你试过将表格布局设置为固定吗？。卡西米尔，你能给我们看看你的解决方案吗？因为我从drupal core修改的fixed header版本还可以，但像素的增减取决于浏览器……我以前从未使用过JSFIDLE。尝试了一下，但还不能使它工作。不确定这是否有帮助：本地文件的引用越来越多，因此您应该首先解决这些问题，以使JSFIDLE能够正常工作，并有助于确定真正的问题是什么。