Перейти к содержанию
cha0s

Объясните почему ломается таблица? HTML

Рекомендуемые сообщения

Имеется таблица такого вида

<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tbody>
		<tr>
			<td><img alt="" src="4.jpg" width="100%" /><br />
			DOUBLE SIDED RSVP POSTCARD<br />
			WITH PRINTED RETURN ADDRESS<br />
			or<br />
			SINGLE SIDED INSERT CARD<br />
			<b>include in base package</b></td>
			<td><img alt="" src="4.jpg" width="100%" /><br />
			DOUBLE SIDED RSVP POSTCARD<br />
			WITH PRINTED RETURN ADDRESS<br />
			INCLUDING PRE-STAMPED POSTAGE<br />
			<b>+ $0.25 + postage / invitation</b></td>
			<td><img alt="" src="4.jpg" width="100%" /><br />
			SINGLE SIDED RSVP CARD<br />
			WITH ENVELOPE<br />
			<b>+ $0.50 / invitation</b></td>
			<td><img alt="" src="4.jpg" width="100%" /><br />
			SINGLE SIDED RSVP CARD<br />
			WITH ENVELOPE<br />
			WITH PRINTED RETURN ADDRESS<br />
			<b>+ $1.00 / invitation</b></td>
			<td><img alt="" src="4.jpg" width="100%" /><br />
			SINGLE SIDED RSVP CARD<br />
			WITH ENVELOPE<br />
			WITH PRINTED RETURN ADDRESS<br />
			INCLUDING PRE-STAMPED POSTAGE<br />
			<b>+ $1.25 + postage / invitation</b></td>
		</tr>
	</tbody>
</table>

Она плавает как она хочет, все ячейки могут быть разные в зависимости от количества текста, как сделать чтоб ячейки были все одинаковые но при этом при изменение размера экрана тоже под него подстраивались(вариант с фиксированным размером не подходит), собственно вопрос как сделать чтоб ячейки все были одинакового размера и не разползались одна больше другая меньше и т.д, мне ведь не обязательно текст от таблицы делать в отдельной ячейке? хотя это тоже не помогало.

 

такой дурдом получается table.JPG

То есть размеры пляшут как хотят, хотя размер картинки установлен что он будет 100% от размера экрана, ну и сама таблица 100%. WTF?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Задать ширину ячейки в процентах: <td width="X%">, где Х=100/количество ячеек в строке (для 3 - 33,3%, для 4 - 25% и т.д.)

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

table2.JPG

<table border="0" cellpadding="1" cellspacing="1" witdh="80%">
	<tbody>
		<tr>
			<th style="width:33%">test</th>
			<th style="width:33%">test</th>
			<th style="width:33%">test</th>
		</tr>
		<tr>
			<td style="width:33%"><img alt="" src="4.jpg" /><br />
			3.75" X 3.75" SMALL INSERT CARD<br />
			used for reception info, website small details<br />
			<b>+ $1.00 / invitation</b></td>
			<td style="width:33%"><img alt="" src="4.jpg" /><br />
			3.75" X 5.75" LARGE INSERT CARD<br />
			used for accommodations, travel or guest information<br />
			<b>+ $1.25 / invitation</b></td>
			<td style="width:33%"><img alt="" src="4.jpg" /><br />
			ENVELOPE LINERS<br />
			<b>+ $1.00 / invitation</b></td>
		</tr>
	</tbody>
</table>

Все равно выше они разных размером, смотрел через Chrome inspector:) первая 208х208, вторая 234х208, 3-тья 243х208  :-D она от количества текста меняет размеры и все... ячейка становиться не такая как все, если я полностью сделаю их идентичные тогда будет все ровненько везде ну так то не годиться)

 

П.С я как понимаю мне не нужно задавать размер картинки в %? достаточно что ячейка задана? она уже будет от размера экрана и саму картинку тоже уменьшать?)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

а так?

<table cellpadding="0" cellspacing="0" style="width: 100%; ">
 <tr>
 
<td valign="top" style="width: 33%; height="330"> 
<img alt="" style="width: 208px; height: 208px;" /><br />
ТЕКСТ
</td>

<td valign="top" style="width: 33%; height="330"> 
<img alt="" style="width: 208px; height: 208px;" /><br />
ТЕКСТ
</td>

<td valign="top" style="width: 33%; height="330"> 
<img alt="" style="width: 208px; height: 208px;" /><br />
ТЕКСТ
</td>

 </tr> 
</table>
П.С я как понимаю мне не нужно задавать размер картинки в %? достаточно что ячейка задана? она уже будет от размера экрана и саму картинку тоже уменьшать?)

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

а так?

<table cellpadding="0" cellspacing="0" style="width: 100%; ">
 <tr>
 
<td valign="top" style="width: 33%; height="330"> 
<img alt="" style="width: 208px; height: 208px;" /><br />
ТЕКСТ
</td>

<td valign="top" style="width: 33%; height="330"> 
<img alt="" style="width: 208px; height: 208px;" /><br />
ТЕКСТ
</td>

<td valign="top" style="width: 33%; height="330"> 
<img alt="" style="width: 208px; height: 208px;" /><br />
ТЕКСТ
</td>

 </tr> 
</table>

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

 

Чет ты тут намудрил)) style="width: 33%; height="330" в стиле и width: и height= 330 чего? мне не нужно фиксированный размеры, мне надо чтоб все было в % и все ячейки были ровненькие :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

тогда просто сделай верстку дивами и не мучайся

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А как будет выглядить верстка дивами такого вида

image.JPG

 

 

 

чтоб это было в полную ширину родительского дива он там 960px. как-бы сверстать картинки и выстроить в ряд не проблема display:inline-block; или через float, как разместить текст чтоб он был по середине каждой картинки?

 

<div style="display:inline-block;">

<img ..........>

<img ..........>

<img ..........>

<img ..........>

<img ..........>

<img ..........>

</div>

и потом отдельный блок под текст под картинки? или строить внутренние блоки? покажи пример если не сложно ;) Спасиб. Ну и тогда чтоб они уже не подгонялись под размер экрана, а просто уходили на другую строку вместе с текстом... ну то есть если в ряд не помещаются за счет маленького экрана то уходят на другую строку просто, а если маленький вообще экран то тупо в одной строке картинка,текст, ниже так-же и так все 12 штук...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Более имение сам разобрался с этим вышло так 

<style>
  .wrapper_my{width:100%;}
 
.table{
   display:table;   
   width:100%;
   text-align:center;
}
 
.row{
   display:table-row;   
}
 
.col{
    display:table-cell;
    border:1px solid black;
}
 
 .myimage { margin-left:10px;}
</style>

<div class="wrapper_my">
<div class="table">
<div class="row">
<div class="col"><img alt="" class="myimage" src="http://..../image.JPG" /></div>

<div class="col"><img alt="" class="myimage" src="http://..../image.JPG" /></div>

<div class="col"><img alt="" class="myimage" src="http://..../image.JPG" /></div>

<div class="col"><img alt="" class="myimage" src="http://..../image.JPG" /></div>

<div class="col"><img alt="" class="myimage" src="http://..../image.JPG" /></div>

<div class="col"><img alt="" class="myimage" src="http://..../image.JPG" /></div>
</div>

<div class="row">
<div class="col">DRAMATIC SCRIPT</div>

<div class="col">PREPPY CHIC</div>

<div class="col">MODERN CALLIGRAPHY</div>

<div class="col">BOLD STRIPED MORDERN</div>

<div class="col">SWEEPING SCRIPT</div>

<div class="col">GRACEFUL BOTANIC</div>
</div>
</div>

<div class="table">
<div class="row">
<div class="col"><img alt="" class="myimage" src="http://..../image.JPG" /></div>

<div class="col"><img alt="" class="myimage" src="http://..../image.JPG" /></div>

<div class="col"><img alt="" class="myimage" src="http://..../image.JPG" /></div>

<div class="col"><img alt="" class="myimage" src="http://..../image.JPG" /></div>

<div class="col"><img alt="" class="myimage" src="http://..../image.JPG" /></div>

<div class="col"><img alt="" class="myimage" src="http://..../image.JPG" /></div>
</div>

<div class="row">
<div class="col">EUROPEAN SCROLL</div>

<div class="col">MODERN SWIRL & FLOURISH</div>

<div class="col">ENCHANTING VINTAGE</div>

<div class="col">DELICATE FILIGREE</div>

<div class="col">STARFISH AND SHELL</div>

<div class="col">ROMANTIC FLOURISH</div>
</div>
</div>
</div>

Выглядит так:

my.JPG

 

Конечно не идеально ровно бррр.... Скажите как сделать чтоб при уменьшение расширение окна, таблица как-бы сказать ломалась на части под размер экрана? словно если юзать float; если какие-то вещи не помещаются они переезжают на след строку?

 

вот что я хочу сказать тут я использую просто div style="float:left;">6 картинок</div>, resize.JPG

 

 

могу ли сделать так-же к своей таблице верхней? чтоб картинка вместе с текстом уходила когда экран становиться маленький.... реально?;D или какой-то заплет

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

постарался максимум показать и минимум напрягать кого-то, нужно только сделать чтоб при уменьшение окна браузера, картинки перекатывались на другую сторону и все!) как у меня на последней картинки сделано, но мне надо чтоб картинка вместе с текстом переползала(как одно целое), воть как такое сделать?)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

а открыть шаблон категорий и посмотреть, как там выводятся товары блоками (с кучей инфы) по размеру окна - не судьба?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

счас проверил категории с товарами они там при сужение экрана дают такой эффект small.JPG

Не стал уже фоткать именно на товарах) но там просто скролиинг появляется.... divi ведь не переходят на другую сторону :)

 

а мне надо не скроллинг а вот такое вот

 resize.JPG

 

то есть те divi которые не влезли перешли на 2-ю строку как-бы.... ты скорей читал выше тему :) там уже не нужно ничего.... только вот с этим... просто не понимаю как это сделать мне картинка вместе с текстом чтоб переползала(как одно целое).

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
<div id="table_row">


<div class="row">    
    <ul>      
      <li class="row_img"><img alt=""  src="http://..../image.JPG" /></li>
      <li class="row_name">EUROPEAN SCROLL</li>
    </ul>    
  </div>


<div class="row">    
    <ul>      
      <li class="row_img"><img alt="" src="http://..../image.JPG" /></li>
      <li class="row_name">MODERN SWIRL & FLOURISH</li>
    </ul>    
  </div>


...............
</div>

по поводу скролла:

overflow: hidden

тебя спасет)))

для общего блока примерно так:

#table_row > div {    
    width: 208px;
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    margin-bottom: 20px;
}

для row_name задать фиксированную высоту ( чтоб не прыгали блоки), например

.row_name {
    height: 30px;
    .......
}
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Pascha

 

классно и правду в плане списка такое сделать лучше всего из того что было у меня))) да теперь все как надо перекатываются если не вмещаются и т.д. СПАСИБ! ^^ не overflow: hidden; знаю это зло для моей задачи))) он тупо срежит если не влезет и все, уже лучше скролинг тогда :-D  Спасиб еще раз!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

скролл от фиксированной ширины родительского блока появляется, которая становится больше размера окна при изменении размеров окна.

RTFM

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.