HTML-макет - горизонтальная прокрутка

Question

HTML-макет - горизонтальная прокрутка

0

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

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

Две проблемы: -
1> Я добавил свойство прокрутки в div из таблицы выше, но он показывает обе таблицы. Я хочу прокручивать только верхнюю таблицу.
2> Также GUI покрывает только половину веб-страницы (как сделать ее максимально полной на странице).

Пожалуйста, предложите об этом.

<!DOCTYPE html>
<html>

<style>

div.scrollable {
    width: 100%;
    height: 0%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

</style>

<body>


<div class=scrollable>
<table >
  <tr>

    <td colspan="2" style="background-color:#CC99FF; white-space:nowrap;">

    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />


<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

    </td>
  </tr>
</div>


</table>





<div>

<table width="100%"  border="0">

  <tr valign="top">
    <td style="background-color:#FFCCFF;
                  width:100px;text-align:top;">
      <b>Main Menu</b><br />
      BUTTON-1<br />
      BUTTON-2<br />
      BUTTON-3
    </td>

    <td style="background-color:#eeeeee;height:200px;
                  width:300px;text-align:top;">
        Table center
    </td>

  </tr>
  <tr>
    <td colspan="2" style="background-color:#CC99FF;">
        <center>
      Copyright  2014 My First Layout
        </center>
    </td>
  </tr>
</table>

</div>

</body>
</html>

Katoch 14 март 2014, в 08:54

Источник

0

По какой причине вы используете таблицы для этого?
Ruddy 14 март 2014, в 08:22
0

тогда что использовать ..? я ссылался на этот учебник .. w3schools.com/html/html_layout.asp
Katoch 14 март 2014, в 10:00
0

На этом сайте даже сказано, что Using <table> to create a nice layout is NOT the correct use of the element. The purpose of the <table> element is to display tabular data! , Я бы порекомендовал использовать div т.д ...
Ruddy 14 март 2014, в 10:13

Показать ещё 1 комментарий

Теги:

html

css

2 ответа

Ещё вопросы

По какой причине вы используете таблицы для этого?
тогда что использовать ..? я ссылался на этот учебник .. w3schools.com/html/html_layout.asp
На этом сайте даже сказано, что Using <table> to create a nice layout is NOT the correct use of the element. The purpose of the <table> element is to display tabular data! , Я бы порекомендовал использовать div т.д ...

bosnjak · Answer 1 · 2014-03-14T06-20-00.000Z

Для начала у вас неправильная вложенность для div и таблицы:

<div class=scrollable>
<table >
...
</div>
</table>

Во-вторых, div внутри таблицы не имеет никакого смысла. Поместите его в свою внутреннюю ячейку td:

<table>
<tr><td>
<div>
...
</div>
</td>
</tr>
</table>

В-третьих, у вас есть атрибут colspan в вашем td из первой таблицы, но в таблице есть только одна ячейка. Это нужно удалить.

И, наконец, главная причина, почему это не работает, состоит в том, что у вас есть div, размер которого составляет 100% от ячейки контейнера, которая не имеет максимальной ширины, поэтому все расширяется, потому что не выполняется условие, чтобы остановить его.

Решение: используйте max-width с фиксированным значением для ячейки с изображениями:

<td style="max-width:1024px; background-color:#CC99FF; white-space:nowrap;">

первый ответ работает ... второй вариант никогда не сработает .. я пробовал это раньше.
Div не в ячейке, а в другом месте таблицы почти всегда нарушает ваш макет. Проверьте эту статью: css-tricks.com/using-divs-inside-tables
нет, я попробовал это, прежде чем он не работает .. вы можете показать на .... jsfiddle.net
с текстом это работает, я делал это раньше ... но не с изображением ...
@Katoch Первый путь неправильный, не используйте его так. Это не одна из них: «О, кажется, все работает так хорошо», нет. Это недействительно, и это только вызовет проблемы.

ravi patel · Answer 2 · 2014-03-14T05-11-00.000Z

Управляйте своей структурой html div:

input[type="image"]{
    float:left;
}

в чем преимущество добавления этого внутри моей структуры Div .. id не видел никакой разницы.