Заголовок и результаты в разных таблицах

sniffer · December 21, 2007

Делаю таблицу следующего вида:

Отдельная таблица заголовков и отдельная таблица резултатов. Вертикальный скроллинг должен скролить только результаты, а горизонтальный скроллинг скролит и результаты и заголовки.

<!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>
</head>
<style type="text/css">
div.HeadersContainer
{
 width:100%;
 overflow:hidden;
 position:relative;
 top:0px;
 left:0px;
}

table.Headers
{
 position:relative;
 top:0px;
 left:0px;
 border:solid 1px black;
}

div.ResultsContainer
{
 width:100%;
 overflow:auto;
 height:250px;
}

table.Results
{
 border-style:solid;
 border-width:0 1px 1px 1px;
 border-color:black;
}
td, th
{
 border:solid 1px black;
}

table
{
 /*border-collapse:collapse;*/
 border:solid 1px black;
}
</style>
<body>
<div id="Container" class="Container">
 <div id="HeadersContainer" class="HeadersContainer">
 <table id="Headers" cellspacing="0" class="Headers">
 <tr>
 <th>HeaderHeader1</th>
 <th>HeaderHeader2</th>
 <th>HeaderHeader3sagfasg</th>
 <th>HeaderHeader4</th>
 <th>HeaderHeader5</th>
 <th>HeaderHeader6</th>
 <th>HeaderHeader7</th>
 <th>HeaderHeader8</th>
 <th>HeaderHeader9</th>
 <th>HeaderHeader10</th>
 <th>HeaderHeader11</th>
 <th>HeaderHeader12</th>
 <th>HeaderHeader13</th>
 <th>HeaderHeader14</th>
 <th>HeaderHeader15</th>
 <th>HeaderHeader16</th>
 <th>HeaderHeader17</th>
 <th>HeaderHeader18</th>
 </tr>
 </table>
 </div>
 <div id="ResultsContainer" class="ResultsContainer">
 <table id="Results" cellspacing="0" class="Results">
 <tr>
 <td>ougslg3456adsfdasfasdf dskog kjsfl kgjasg1</td>
 <td>ougsl43564356435tetggadsfdasfasdf dskog kjsfl kgjasg2</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg3</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg4</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg5</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg6</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg7</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg8</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg9</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg10</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg11</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg12</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg13</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg14</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg15</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg16</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg17</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg18</td>
 </tr>
 <tr>
 <td>ougslgad3456sfdasfasdf dskog kjsfl kgjasg1</td>
 <td>ougslgaddsh345643564356456sfdasfasdf dskog kjsfl kgjasg2</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg3</td>
 <td>ougslgaddshdsghdgshsfdasfasdf dskog kjsfl kgjasg4</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg5</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg6</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg7</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg8</td>
 <td>ougslgadsfddshdgsasfasdf dskog kjsfl kgjasg9</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg10</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg11</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg12</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg13</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg14</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg15</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg16</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg17</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg18</td>
 </tr>
 <tr>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg1</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg2</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg3</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg4</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg5</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg6</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg7</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg8</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg9</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg10</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg11</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg12</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg13</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg14</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg15</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg16</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg17</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg18</td>
 </tr>
 <tr>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg1</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg2</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg3</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg4</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg5</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg6</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg7</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg8</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg9</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg10</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg11</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg12</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg13</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg14</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg15</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg16</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg17</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg18</td>
 </tr>
 <tr>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg1</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg2</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg3</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg4</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg5</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg6</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg7</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg8</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg9</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg10</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg11</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg12</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg13</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg14</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg15</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg16</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg17</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg18</td>
 </tr>
 <tr>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg1</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg2</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg3</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg4</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg5</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg6</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg7</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg8</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg9</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg10</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg11</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg12</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg13</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg14</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg15</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg16</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg17</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg18</td>
 </tr>
 <tr>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg1</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg2</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg3</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg4</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg5</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg6</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg7</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg8</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg9</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg10</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg11</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg12</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg13</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg14</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg15</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg16</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg17</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg18</td>
 </tr>
 <tr>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg1</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg2</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg3</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg4</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg5</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg6</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg7</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg8</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg9</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg10</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg11</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg12</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg13</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg14</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg15</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg16</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg17</td>
 <td>ougslgadsfdasfasdf dskog kjsfl kgjasg18</td>
 </tr>
 </table>
 </div>
</div>

<script language="javascript" type="text/javascript">
function resize()
{
 var headersTable = document.getElementById("Headers");
 var resultsTable = document.getElementById("Results");
 var resultsContainer = document.getElementById("ResultsContainer");

 var headersTds = headersTable.rows[0].cells;
 var resultsTds = resultsTable.rows[0].cells;

 for(var i = 0; i < resultsTds.length; i++) {
 var headerCell = headersTds[i];
 var resultCell = resultsTds[i];
 if(headerCell.clientWidth >= resultCell.clientWidth) {
 resultCell.style.width = headerCell.clientWidth - (headerCell.offsetWidth - headerCell.clientWidth) + "px";
 resultCell.innerHTML = "<div style="width:" + resultCell.style.width + ";">" + resultCell.innerHTML + "</div>";
 } else {
 headerCell.style.width = resultCell.clientWidth - (resultCell.offsetWidth - resultCell.clientWidth) + "px";
 headerCell.innerHTML = "<div style="width:" + headerCell.style.width + ";">" + headerCell.innerHTML + "</div>";
 }
 }
}

document.getElementById('ResultsContainer').onscroll = function() {
 var table = document.getElementById('ResultsContainer');
 var header = document.getElementById('Headers');
 header.style.left = -table.scrollLeft + "px";
}
setTimeout("resize();", 500);

</script>
</body>
</html>

Основная идея - проходим по строке с заголовками и строке с результатами и выравниваем по большему вставляя содержимое ячейки в div.

Проблема в том, что если раскомментировать строку border-collapse:collapse; в стилях, то границы ячеек становятся равным 1 пиксель и выравнивание колонок работает некорректно.

Может кто поможет исправить проблему. Нужно чтобы работало с границами в один пиксель.

Заранее спасибо.

Sign In

Заголовок и результаты в разных таблицах

Question

sniffer

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information