Jump to content
  • 0

div растянуть на высоту ячейки таблицы

bodnar

Asked by bodnar,

 Share

Question

bodnar Explorer

bodnar

Posted
Posted

Вобщем в каждой ячейке таблицы лежит по div(в некоторых может лежать два). Никак не получается растянуть div по высоте во всю ячейку. есть только вот так:

5b4f75191175.png

div имеет красный фон для наглядности

height: 100% не дает нужного эфекта

Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0
Justnewone Explorer

Justnewone

Posted
Posted
Вобщем в каждой ячейке таблицы лежит по div(в некоторых может лежать два). Никак не получается растянуть div по высоте во всю ячейку. есть только вот так:

5b4f75191175.png

div имеет красный фон для наглядности

height: 100% не дает нужного эфекта

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

Link to comment
Share on other sites
  • 0
bodnar Explorer

bodnar

Posted
  • Author
Posted (edited)

угу, указал высоту в пикселях по всем tr, стало работать как хотелось бы, но только если не указан доктайп. Что делать :)

<html>
   <head>
   <link rel="stylesheet" type="text/css" href="main2.css" />
   </head>
   <body>
   <table border=1 width=100% CELLSPACING ="0">
   <tr height="10">
   <td><div class="myclass">1</div></td>
   <td><div class="myclass">2</div></td>
   </tr>

   <tr height="10">
   <td><div class="myclass">3</div></td>
   <td><div class="myclass">4</div></td>
   </tr>

   <tr height="10">
   <td><div class="myclass">5</div></td>
   <td><div class="myclass">здесь
	много
	текста
   очень много 
   </div></td>
   </tr>
   </table>
   </body>
   </html>

css 

.myclass{
 height: 100%;
 background-color: red;
 }

добавляем доктайп все перестает работать

кстати в хроме и без доктайпа не работает

Edited by bodnar
Link to comment
Share on other sites
  • 0
bodnar Explorer

bodnar

Posted
  • Author
Posted

Ааа, то есть так?

 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="main2.css" />
 </head>
 <body>
 <table border=1 width="100%" CELLSPACING ="0" height="100%">
 <tr height="100%">
 <td><div class="myclass" height="100%">1</div></td>
 <td><div class="myclass" height="100%">2</div></td>
 </tr>

 <tr height="100%">
 <td><div class="myclass" height="100%">3</div></td>
 <td><div class="myclass" height="100%">4</div></td>
 </tr>

 <tr height="100%">
 <td><div class="myclass" height="100%">5</div></td>
 <td><div class="myclass" height="100%">здесь
  много
  текста
 </div></td>
 </tr>
 </table>
 </body>
 </html>

C доктайпом FF и crome показывают нормально, а opera и ie показывает так как на первом скриншоте

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Ааа, то есть так?

 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="main2.css" />
 </head>
 <body>
 <table border=1 width="100%" CELLSPACING ="0" height="100%">
 <tr height="100%">
 <td><div class="myclass" height="100%">1</div></td>
 <td><div class="myclass" height="100%">2</div></td>
 </tr>

 <tr height="100%">
 <td><div class="myclass" height="100%">3</div></td>
 <td><div class="myclass" height="100%">4</div></td>
 </tr>

 <tr height="100%">
 <td><div class="myclass" height="100%">5</div></td>
 <td><div class="myclass" height="100%">здесь
  много
  текста
 </div></td>
 </tr>
 </table>
 </body>
 </html>

C доктайпом FF и crome показывают нормально, а opera и ie показывает так как на первом скриншоте

А разве у таблицы НЕТ родителей?

Link to comment
Share on other sites
  • 0
bodnar Explorer

bodnar

Posted
  • Author
Posted 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="main2.css" />
 </head>
 <body>
 <table cellspacing="0" border="1">
 <tr>
 <td><div class="myclass">1</div></td>
 <td><div class="myclass">2</div></td>
 </tr>

 <tr>
 <td><div class="myclass">3</div></td>
 <td><div class="myclass">4</div></td>
 </tr>

 <tr>
 <td><div class="myclass">5</div></td>
 <td><div class="myclass">здесь
  много
  текста
 </div></td>
 </tr>
 </table>
 </body>
 </html>

 .myclass{
 height: 100%;
 background-color: red;
 }
 html body table td tr {
 height: 100%;
 }
 table{
 width:100%;
 }

пожалуйста, те же яйца вид сбоку)) как в двух браузерах не работало так и не работает

Link to comment
Share on other sites
  • 0
bodnar Explorer

bodnar

Posted
  • Author
Posted
Это что такое?

там запитульки должны бтыь, пропустил -_-

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
там запитульки должны бтыь, пропустил -_-

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

Вот тут уже нужно взять допустим три строки, и каждой ячейке в них задать высоту по 33% например. Либо верхней и нижней по 10%, а середине 80%

Link to comment
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.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

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

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept