Таблица выходит за пределы области вывода контента

  • 11 Ответов
  • 986 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Alex-heat-shot

  • Новичок
  • *
  • 7
  • 0
Здравствуйте! Таблица на сайте выходит за пределы блока, не могу понять в чем дело, помогите пожалуйста или скиньте ссылку где можно прочитать или скажите в чем проблему, вот ссылка на таблицу http://tverdyy-pereplet.ru/izgotovlenie-flaerov.html. Если не видно, нажмите на ctrl и покрутите колёсико на мышке.

*

Shustry

  • Группа развития
  • *****
  • 6426
  • 733
  • Рисую дизайны
Жуть какая

Код: html4strict
<table class="MsoTableGrid" style="border-collapse: collapse; mso-table-layout-alt: fixed; border: none; mso-border-alt: double windowtext 1.5pt; mso-table-overlap: never; mso-yfti-tbllook: 1184; mso-table-lspace: 9.0pt; margin-left: 6.75pt; mso-table-rspace: 9.0pt; margin-right: 6.75pt; mso-table-anchor-vertical: paragraph; mso-table-anchor-horizontal: column; mso-table-left: center; mso-table-top: .05pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-border-insideh: 1.5pt double windowtext; mso-border-insidev: 1.5pt double windowtext;" border="1" cellspacing="0" cellpadding="0" align="left">

Вот это всё нужно заменить на

Код: html4strict
<table class="MsoTableGrid">
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Shustry

  • Группа развития
  • *****
  • 6426
  • 733
  • Рисую дизайны
И далее по-содержимому, конечно, все атрибуты поудалять. Стили оформить в CSS.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Kasyanov

  • Осваиваюсь на форуме
  • ***
  • 68
  • 6
  • Всё будет хорошо)
Если убрать отступы по бокам таблицы (margin-left и margin-right) и слегка уменьшить внутренние padding (в td), то всё входит.

А вы её из Wordа вставляли?
Русские шаблоны для Joomla и полезные скрипты для веб-мастера

*

Alex-heat-shot

  • Новичок
  • *
  • 7
  • 0
Если убрать отступы по бокам таблицы (margin-left и margin-right) и слегка уменьшить внутренние padding (в td), то всё входит.

А вы её из Wordа вставляли?
да, из word и с других своих сайтов, таблица не уменьшается при изменении размера контейнера, а просто выходит за блок.

*

Kasyanov

  • Осваиваюсь на форуме
  • ***
  • 68
  • 6
  • Всё будет хорошо)
Она не уменьшиться, потому что в ячейках стоят отступы, можно попробовать уменьшить шрифт.

А если по правильному, то из Wordа не надо вставлять. Word добавляет свои ненужные теги. Посмотрите на html-код - он должен быть раза в 4-5 корче.
Таблицы в HTML создавать не сложно.

Если что вот курс в помощь - http://kasyanov.info/page/free-html/
Русские шаблоны для Joomla и полезные скрипты для веб-мастера

*

Alex-heat-shot

  • Новичок
  • *
  • 7
  • 0
И далее по-содержимому, конечно, все атрибуты поудалять. Стили оформить в CSS.
всё равно выходит, убрал все стили, на планшете с маленьким экраном она выходит за борт, это можно увидеть на компьютере нажав контрл и колёсико крутануть. Вот код
Код
<div align="center">
<table class="MsoTableGrid">
<tbody>
<tr>
<td>
<p><strong><span>50шт</span></strong>
</p>
</td>
<td>
<p><strong><span>100шт</span></strong>
</p>
</td>
<td>
<p><strong><span>200шт</span></strong>
</p>
</td>
<td>
<p><strong><span>300шт</span></strong>
</p>
</td>
<td>
<p><strong><span>Размер</span></strong>
</p>
</td>
<td>
<p><strong><span>500шт</span></strong>
</p>
</td>
<td>
<p><strong><span>1000шт</span></strong>
</p>
</td>
<td>
<p><strong><span>2000шт</span></strong>
</p>
</td>
<td>
<p><strong><span>5000шт</span></strong>
</p>
</td>
</tr>
<tr>
<td>
<p><span>305р</span>
</p>
</td>
<td>
<p><span>370р</span>
</p>
</td>
<td>
<p><span>685р</span>
</p>
</td>
<td>
<p><span>998р</span>
</p>
</td>
<td>
<p><strong><span>7*10см</span></strong>
</p>
</td>
<td>
<p><span>1,100р</span>
</p>
</td>
<td>
<p><span>2,115р</span>
</p>
</td>
<td>
<p><span>4,105р</span>
</p>
</td>
<td>
<p><span>10,080р</span>
</p>
</td>
</tr>
<tr>
<td>
<p><span>365р</span>
</p>
</td>
<td>
<p><span>545р</span>
</p>
</td>
<td>
<p><span>725р</span>
</p>
</td>
<td>
<p><span>1,100р</span>
</p>
</td>
<td>
<p><strong><span>5*15см</span></strong>
</p>
</td>
<td>
<p><span>1,205р</span>
</p>
</td>
<td>
<p><span>2,235р</span>
</p>
</td>
<td>
<p><span>4,350р</span>
</p>
</td>
<td>
<p><span>10,265р</span>
</p>
</td>
</tr>
<tr>
<td>
<p><span>485р</span>
</p>
</td>
<td>
<p><span>665р</span>
</p>
</td>
<td>
<p><span>1,100р</span>
</p>
</td>
<td>
<p><span>1,630р</span>
</p>
</td>
<td>
<p><strong><span>7*15см</span></strong>
</p>
</td>
<td>
<p><span>1,840р</span>
</p>
</td>
<td>
<p><span>3,325р</span>
</p>
</td>
<td>
<p><span>6,520р</span>
</p>
</td>
<td>
<p><span>15,905р</span>
</p>
</td>
</tr>
<tr>
<td>
<p><span>615р</span>
</p>
</td>
<td>
<p><span>790р</span>
</p>
</td>
<td>
<p><span>1,570р</span>
</p>
</td>
<td>
<p><span>2,365р</span>
</p>
</td>
<td>
<p><strong><span>10*15см</span></strong>
</p>
</td>
<td>
<p><span>3,625р</span>
</p>
</td>
<td>
<p><span>5,985р</span>
</p>
</td>
<td>
<p><span>8,695р</span>
</p>
</td>
<td>
<p><span>19,925р</span>
</p>
</td>
</tr>
<tr>
<td>
<p><span>605р</span>
</p>
</td>
<td>
<p><span>735р</span>
</p>
</td>
<td>
<p><span>1,530р</span>
</p>
</td>
<td>
<p><span>2,265р</span>
</p>
</td>
<td>
<p><strong><span>7*20см</span></strong>
</p>
</td>
<td>
<p><span>3,500р</span>
</p>
</td>
<td>
<p><span>5,860р</span>
</p>
</td>
<td>
<p><span>8,575р</span>
</p>
</td>
<td>
<p><span>19,805р</span>
</p>
</td>
</tr>
<tr>
<td>
<p><span>910р</span>
</p>
</td>
<td>
<p><span>1,155р</span>
</p>
</td>
<td>
<p><span>2,295р</span>
</p>
</td>
<td>
<p><span>3,280р</span>
</p>
</td>
<td>
<p><strong><span>10*20см</span></strong>
</p>
</td>
<td>
<p><span>4,470р</span>
</p>
</td>
<td>
<p><span>6,885р</span>
</p>
</td>
<td>
<p><span>12,075р</span>
</p>
</td>
<td>
<p><span>27,170р</span>
</p>
</td>
</tr>
<tr>
<td>
<p><span>1030р</span>
</p>
</td>
<td>
<p><span>1,570р</span>
</p>
</td>
<td>
<p><span>2,965р</span>
</p>
</td>
<td>
<p><span>4,440р</span>
</p>
</td>
<td>
<p><strong><span>15*20см</span></strong>
</p>
</td>
<td>
<p><span>5,985р</span>
</p>
</td>
<td>
<p><span>8,695р</span>
</p>
</td>
<td>
<p><span>16,905р</span>
</p>
</td>
<td>
<p><span>37,435р</span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
, Это дело в шаблоне, на других моих сайтах эта таблица не выходит за пределы контейнера

*

Shustry

  • Группа развития
  • *****
  • 6426
  • 733
  • Рисую дизайны
Сейчас же всё прекрасно входит. Пропишите вот так <table class="MsoTableGrid" width="100%">
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Alex-heat-shot

  • Новичок
  • *
  • 7
  • 0
Ничего не получается, таблицы всё равно выходят за предел блока, как сделать так, что бы они уменьшали в размере подстраиваясь под блок?

*

AlekVolsk

  • Профи
  • ********
  • 6301
  • 336
ТС, минус таблиц в том, что они всегда имеют при определенном контенте минимальную ширину, меньше которой сделать не получится, зато можно обернуть таблицу в блок с горизонтальной прокруткой, это в настоящий момент самое распространенное решение вашей проблемы

*

Alex-heat-shot

  • Новичок
  • *
  • 7
  • 0
спасибо! Ещё можно в виде картинки её выложить ^-^

*

fsv

  • Практически профи
  • *******
  • 2506
  • 367
Заказать разработку:    расширения Joomla  |   интерфейсы на javascript(jQuery)  |  мобильные приложения