Jump to content
Sign in to follow this  
cha0s

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

Recommended Posts

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

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

Share this post


Link to post
Share on other sites

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

  • +1 1

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

а так?

<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>
П.С я как понимаю мне не нужно задавать размер картинки в %? достаточно что ячейка задана? она уже будет от размера экрана и саму картинку тоже уменьшать?)

 

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

Share this post


Link to post
Share on other sites

а так?

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

Share this post


Link to post
Share on other sites

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

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

  • +1 1

Share this post


Link to post
Share on other sites

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

image.JPG

 

 

 

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

 

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

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

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

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

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

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

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

</div>

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

Share this post


Link to post
Share on other sites

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

<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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

 

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

 resize.JPG

 

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

Share this post


Link to post
Share on other sites
<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

Share this post


Link to post
Share on other sites

Pascha

 

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

Share this post


Link to post
Share on other sites

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

RTFM

Share this post


Link to post
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.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

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

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.