HTML-макет - соответствие размеров ячеек в отдельных таблицах - PullRequest
Новая
       16

HTML-макет - соответствие размеров ячеек в отдельных таблицах

0 голосов
/ 28 февраля 2012

Фон

Я пытаюсь клонировать части таблицы и наложить клоны поверх исходной таблицы, чтобы создать заголовки, которые фиксируются на странице при прокрутке. Я использую плагин jQuery: модифицированная версия datatables FixedHeader для этого. Я попытался FixedColumns , но это не работает так, как я хочу.

У меня выше работает, за исключением того, что клонированные таблицы не совпадают с исходной таблицей. например верхний заголовок имеет ячейки, которые уже, чем ячейки в реальной таблице.

Я попытался установить ширину ячеек, как это делает оригинальный код FixedHeader, но, похоже, это не имеет никакого эффекта. Кроме того, если вручную установить ширину на вкладке «Макет» в Firebug, он обновляет style = "width: blah" в элементе в представлении HTML, но фактически не изменяет ширину ячеек.

Вопрос

Как установить ширину ячеек во второй таблице так, чтобы она соответствовала ширине ячеек в исходной таблице, чтобы они совпали при расположении второй таблицы поверх первой таблицы.

Для более простой версии выше, рассмотрите следующий код. Хотя я явно установил ширину первых двух элементов th в обеих таблицах, ячейки второй таблицы слишком узкие. Я не хочу указывать ширину ячеек в исходной таблице. Я только хочу установить ширину ячеек во второй таблице, чтобы соответствовать первой. Как мне это сделать? 

<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>

Редактировать: я обнаружил, что для приведенного выше кода установка второй table ширины, равной первой table, устраняет проблему, но в моем реальном коде ячейки по-прежнему имеют неправильную ширину , Как выяснить, где проблема и как ее исправить?

1 Ответ

0 голосов
/ 28 февраля 2012

В вашем примере вы установили два столбца в первой таблице с точной шириной.Это приводит к тому, что первые два столбца вашей второй таблицы становятся «слишком узкими», поскольку их ширина относительна, а не абсолютна, поэтому браузер показывает, насколько они должны быть шире по сравнению с другими столбцами.

Ваш выбор прост: установите оба столбца таблицы с точной шириной или оба без.В противном случае всегда будут различия.Если вы этого не сделаете (для обоих), ширина столбцов заголовков также зависит от ширины ячеек в строках под ними, что зависит от того, что в них.Это означает, что либо вы не используете точную ширину, и вам нужно сделать две таблицы абсолютно идентичными по содержанию (таким образом, две целые таблицы), либо вы указываете точную ширину столбцов для обеих, и в этом случае вы можете обойтись только сстрока заголовка для второй таблицы.

Если бы мне пришлось позаботиться об этом, я бы сказал, сгенерировать одну таблицу и использовать jQuery или MooTools для создания дублирующих столбцов заголовка.Итак, вы запрашиваете DOM, копируете, вставляете, устанавливаете ширину.

...