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

cha0s · 1 жовтня 2013

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

<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>

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

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

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

Strelez · 1 жовтня 2013

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

cha0s · 1 жовтня 2013

<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 она от количества текста меняет размеры и все... ячейка становиться не такая как все, если я полностью сделаю их идентичные тогда будет все ровненько везде ну так то не годиться)

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

cha0s · 1 жовтня 2013

а так?

<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 чего? мне не нужно фиксированный размеры, мне надо чтоб все было в % и все ячейки были ровненькие :)

cha0s · 3 жовтня 2013

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

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

</div>

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

cha0s · 3 жовтня 2013

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

<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>

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

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

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

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

cha0s · 3 жовтня 2013

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

afwollis · 3 жовтня 2013

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

cha0s · 3 жовтня 2013

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

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

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

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

cha0s · 4 жовтня 2013

Pascha

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

afwollis · 7 жовтня 2013

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

RTFM

Вхід

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

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information