sniffer
-
Posts
2 -
Joined
-
Last visited
sniffer's Achievements
Explorer (1/14)
0
Reputation
-
Делаю таблицу следующего вида: Отдельная таблица заголовков и отдельная таблица резултатов. Вертикальный скроллинг должен скролить только результаты, а горизонтальный скроллинг скролит и результаты и заголовки. <!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 пиксель и выравнивание колонок работает некорректно. Может кто поможет исправить проблему. Нужно чтобы работало с границами в один пиксель. Заранее спасибо.
-
Всем доброго дня. Есть таблица с результатами которая не влазит в стандартное окно по ширине. Нужно для дива с этими результиатами вставить горизонтальную прокрутку. Существует проблема, когда прописываешь в style div.needClass {overflow:auto;} не применяется к этому диву с этим классом, пробовал обращаться и по id. Если прописываешь div {overflow:auto;}, то это применяется соответственно ко всем дивам, и в частности к родительскому, у которого внутри необходимый нам див. Пробовал на отдельной странице, для определенного класса все аккуратно задается. Вопрос1: что может мешать тому чтобы в конкретно прописанном классе не применялось свойство overflow. Еще согласны даже на появление стандартного браузерного горизонтального скролла, но оно почему-то не появляется. Показывается таблица с результатами а невлезающая часть где-то сбоку и ее не видно, но и скроллинг не появляется. Вопрос2: Как можно показать скроллинг окна в этом случае?