Jump to content
  • 0

Таблица+overflow

Seemann

Asked by Seemann,

 Share

Question

Seemann Explorer

Seemann

Posted
Posted

Приветствую.

Возникла проблема при вёрстке, на мой взгляд, необычной таблицы. Всё как бы ничего, но взглянув на картинку - поймёте, что требуется сделать и в чем загвоздка.

Как можно реализовать данную фичу и можно ли посредством простого html? Думаю через overflow, но пока не знаю как именно. Может я неправ. :unsure:

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

250955m.png

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0
Сергей Шолохов Explorer

Сергей Шолохов

Posted
Posted

Час потратил, решить не смог на чистом html.

Единственное что не может html в данном случае - оставить на видимой части нижний скролл в то время, пока правый поднят на верх.

Делается действительно через overflow:hidden, но с приличным добавлением javascript.

На мой взгляд - самый выгодный вариант - переделать таблицу таким образом, что бы сроллы были по всей длине, соответственно продумать вместе с верстальщиком, что бы это можно реализовать без javascript.

Если надо сделать именно как по дизайну - придётся решать через javascript, возможно jquery. Но на javascript решение будет не простое. Так же не уверен, что это можно решить на jquery.

Link to comment
Share on other sites
  • 0
Seemann Explorer

Seemann

Posted
  • Author
Posted (edited)

Сергей Шолохов, Спасибо! Попытался проделать в чистом html - не выходит. Придется вести переговоры с дизайнерами. Думаю, даже если есть достойное решение на javascript/jquery, то все равно это не лучший выход, т.к. JS может не сработать или быть отключен.

Edited by Seemann
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Вертикальную прокрутку в принципе реализовать можно, хотя и разными подходами для IE и остальных (tbody { overflow:... } vs. thead { position:... }). Но геморо сложно. С горизонтальной частью, насколько я в курсе, приемлемо пока никто не справился, так что, наверное, придется смотреть в сторону скриптовых решений типа такого (и еще тысячи их по "JS DataGrid"), а лучше, действительно, переубедить дизайнеров :)

Link to comment
Share on other sites
  • 0
Seemann Explorer

Seemann

Posted
  • Author
Posted 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Хитрая таблица</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<link rel="stylesheet" type="text/css" href="tab1.css">
<style type="text/css"><!--
#tabGl th, #twoTab td {width:100px; font-weight:normal;}

#tabGl, #twoTab {table-layout:fixed;}

#tabGl, #twoTab {width:100%;}

.tab2 {width:100%; height:300px; overflow:auto;}
--></style>
</head>

<body>

<table border="1" cellpadding="0" cellspacing="0" id="tabGl">
<col><col span="2" style="width:9%;">
<tr><td>Ключевое слово
</td><td>Частота
</td><td>Цель
</td><th>12 Августа
</th><th>13 Августа
</th><th>14 Августа
</th><th>15 Августа
</th><th>16 Августа
</th><th>17 Августа
</th><th>18 Августа
</th></tr><tr><td>Вода
</td><td>1
</td><td>100
</td><td colspan="7" rowspan="11"><!-- 1 лишний ровспан для прокрутки -->
<div class="tab2">
<table border="0" cellpadding="0" cellspacing="0" id="twoTab">
<tr><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></tr><tr><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></tr><tr><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></tr><tr><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></tr><tr><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></tr><tr><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></tr><tr><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></tr><tr><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></tr><tr><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></tr><tr><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></tr><tr><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></tr><tr><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></tr><tr><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></tr><tr><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></tr><tr><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></tr><tr><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></tr></table>
</div>

</td></tr><tr><td>Вода
</td><td>2
</td><td>100
</td></tr><tr><td>Вода
</td><td>3
</td><td>100
</td></tr><tr><td>Вода
</td><td>4
</td><td>100
</td></tr><tr><td>Вода
</td><td>5
</td><td>100
</td></tr><tr><td>Вода
</td><td>6
</td><td>100
</td></tr><tr><td>Вода
</td><td>7
</td><td>100
</td></tr><tr><td>Вода
</td><td>8
</td><td>100
</td></tr><tr><td>Вода
</td><td>9
</td><td>100
</td></tr><tr><td>Вода
</td><td>10
</td><td>100
</td></tr><tr><td> <!-- пустышка для прокрутки -->
</td><td> 
</td><td> 

</td></tr></table>

</body>
</html>

На одном из форумов предложили такой вариант, но кажется, он не совсем подходит, ибо там таблица в таблице. Я тоже так сначала пытался.

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted

самое реальное на ЦСС - разрезать таблицу и грузить частями, в том числе в одной части у родителя будет скролл. Формировать подобное програмное конечно трудно, и в коде как бе будет не все однозначно в плане семантики. Но клиентам как правило на это наплевать. Берите много денег за реализацию, это как правило отрезвляет клиента и дезигнер переделывает. Ну или просто денег срежете.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept