Й ширины не работает? - программирование

Небольшой фон, я пытаюсь реализовать минимальное количество частей этого, чтобы получить фиксированные заголовки отчетов из этой демонстрации: http://www.imaputz.com/cssStuff/bigFourVersion.html

У меня есть работа, за исключением того, что ни одна из моих строк заголовков (i havemultiple rows rows) не выравнивается вертикально с ячейками ниже. Я установил ширину всех ячеек одинаково с этим css:

td {
    width: 100px;  
}

th {
    width: 100px;
}

И изменение ширины th оказывает влияние, но по какой-то причине они не получают ширину в 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>

Ответ 1