Question

有一点背景知识，我正在尝试实现最少量的这些来从此演示中获取固定的报告标题： http://www.imaputz.com/cssStuff/bigFourVersion.html

我有它工作，除了我的标题行（我有多个标题行）没有垂直排列与下面的单元格。我用这个css将所有单元格的宽度设置为相同：

td {
    width: 100px;  
}

th {
    width: 100px;
}

更改宽度确实会产生影响，但由于某种原因，它们的宽度不会达到100像素。从标题行到标题行，由于某种原因宽度不同。 如何强制所有单元格达到相同的宽度？

以下是CSS的其余部分。我正在使用firefox进行测试，并尝试将冻结的标头与CSS一起使用。链接示例中的一些CSS非常特定于该布局，我正在尝试使用任何可用于不同数量的列/行的任何编辑。它目前正在工作，但细胞并非全部对齐。

#reportPlace table thead tr {
    display: block;
}

#reportPlace table tbody {
    display: block;
    height: 262px;
    overflow: auto;
}

注意：如果我删除了两个display: block样式，则会修复列宽的问题，但不会冻结标题行。

在某种程度上解雇了它。我在整个表格上设置了块显示，而不是在每个元素和主体上设置块显示，现在所有列都排成一行。因为多行标题中的每一行都单独设置了块，所以它们独立地自动调整宽度。但是，宽度设置仍然被忽略，我将需要它来格式化报告。

#reportPlace table /*thead tr*/ {
    display: block;
}

#reportPlace table tbody {
/*    display: block;*/
    height: 262px;
    overflow: auto;
}

示例HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Untitled Page</title>
  <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="reportPlace">
    <table border="0">
      <thead>
        <tr class="fixedHeader">
          <th class="titleAllLockedCell">
            <span>&nbsp;</span>
          </th>
          <th class="titleTopLockedCell">
            <span>Fruits</span>
          </th>
          <th class="titleTopLockedCell">
            <span>Vegitables</span>
          </th>
        </tr>
        <tr class="fixedHeader">
          <th class="titleAllLockedCell">
            <span>&nbsp;</span>
          </th>
          <th class="titleTopLockedCell">
            <span>Original</span>
          </th>
          <th class="titleTopLockedCell">
            <span>Original</span>
          </th>
        </tr>
        <tr class="fixedHeader">
          <th class="titleAllLockedCell">
            <span>&nbsp;</span>
          </th>
          <th class="titleTopLockedCell">
            <span>2009</span>
          </th>
          <th class="titleTopLockedCell">
            <span>2009</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="titleLeftLockedCell">
            <span>1-02</span>
          </td>
          <td class="valueCell">
            <span>65412&nbsp;</span>
          </td>
          <td class="valueCell">
            <span>16542&nbsp;</span>
          </td>
        </tr>
        <tr>
          <td class="titleLeftLockedCell">
            <span>1-03</span>
          </td>
          <td class="valueCell">
            <span>456052&nbsp;</span>
          </td>
          <td class="valueCell">
            <span>1654652&nbsp;</span>
          </td>
        </tr>
        <tr>
          <td class="titleLeftLockedCell">
            <span>1-04</span>
          </td>
          <td class="valueCell">
            <span>564654&nbsp;</span>
          </td>
          <td class="valueCell">
            <span>654654&nbsp;</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Answer 1

我需要使用min-width:100px样式而不是width样式。

我发现的其他问题包括要求CSS table { table-layout: fixed; width:100%; }，因为表需要为列设置宽度以尊重宽度。

第一行包含任何colspan也可能是一个问题，所以我添加了一行作为第一行没有边框和0高度（基本上不可见）并且有单独的单元格（没有colspans）这样可以通过第一个“假”行建立宽度，然后使用colspan的第二行不会引起问题。请注意，您不应该填充填充/边距，因为您希望第一行与其他行具有相同的宽度，以便正确建立宽度：

<tr class='scaffolding'>...</tr>

tr.scaffolding, .scaffolding td {
    border:none;
    padding-top:0;
    padding-bottom:0;
    height:0;
    margin-top:0;
    margin-bottom:0;
    visibility:hidden;
}

宽度不起作用？

1 个答案: