Высота ячейки таблицы больше, чем содержимое по умолчанию в Firefox - PullRequest
Новая
       27

Высота ячейки таблицы больше, чем содержимое по умолчанию в Firefox

2 голосов
/ 01 апреля 2011

Просто чтобы вы знали, я новичок в html и CSS, и мне жаль, если вопрос глуп, но у меня есть проблема, которая кажется простой, и все же я искал решение часами и не могне найти ни одного.Есть много форумов, обсуждающих подобные проблемы, но ни одно из решений не применимо к моей конкретной проблеме.Я максимально упростил страницу, чтобы изолировать проблему, и вот что я получил:

Как видите, Google Chrome и Safari сохраняют только первую ячейкутак высоко, как его содержание, именно так, как я хочу, чтобы он отображался.Firefox, однако, произвольно растягивает ячейку до случайной и излишне длинной высоты.

То, что я пробовал до сих пор безуспешно:

  • Установить первую высоту ячейки как "auto"(хотя я думаю, что это уже значение по умолчанию).
  • Установите высоту первой ячейки как 1px
  • Установите высоту "oi" и / или tr как "100%".
  • Установите для первой ячейки значение «display: block;», что дало мне еще более интригующий результат:

http://i.stack.imgur.com/KqBUB.png

Как указать, что я хочуклетка только так высоко, как ее содержимое?Если «авто» не делает этого, что делает?Ни одно из других возможных значений «высоты», кажется, не помогает.Кто-нибудь знает, почему это происходит и как решить эту проблему?

Вот мой код: 

<html>
<body>
<table border="1">
 <tr>
  <td>

   1st cell 1st cell<br/>
   1st cell 1st cell<br/>
   1st cell 1st cell<br/>
   1st cell 1st cell<br/>

  </td>
  <td rowspan="2" style="width: 50%; text-align: center;">

   blablablablaabl<br/>
   blablablalablab<br/>
   bkababakbakabka<br/>
   LONG STUFF<br/>
   blablablablaabl<br/>
   blablablalablab<br/>
   bkababakbakabka<br/>
   blablablablaabl<br/>
   blablablalablab<br/>
   bkababakbakabka<br/>
   LONG STUFF<br/>
   blablablablaabl<br/>
   blablablalablab<br/>
   bkababakbakabka<br/>

  </td>
  <td rowspan="2">

   right content

  </td>
 </tr>
 <tr>
  <td>

   oi

  </td>
 </tr>
</table>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 01 апреля 2011

Вам нужны две вещи: 1. Тип документа.2. Установите высоту Td на 1px, содержимое расширит ячейку. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>

<body>
<table border="1">
 <tr>
  <td style="height: 1px;">

   1st cell 1st cell<br/>   <br/>

  </td>
  <td rowspan="2" style="width: 50%; text-align: center;">

   blablablablaabl<br/>
   blablablalablab<br/>
   bkababakbakabka<br/>
   LONG STUFF<br/>
   blablablablaabl<br/>
   blablablalablab<br/>
   bkababakbakabka<br/>
   blablablablaabl<br/>
   blablablalablab<br/>
   bkababakbakabka<br/>
   LONG STUFF<br/>
   blablablablaabl<br/>
   blablablalablab<br/>
   bkababakbakabka<br/>

  </td>
  <td rowspan="2">

   right content

  </td>
 </tr>
 <tr>
  <td>

   oi

  </td>
 </tr>
</table>
</body>
</html>

Конечно, если вы хотите сделать это с REAL / VALID html + CSS: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<style type="text/css">
<!--
#column_left {
    float: left;
    width: 20%;
}
#column_middle {
    float: left;
    width: 60%;
}
#column_right {
    float: left;
    width: 20%;
}
.breaker {
    clear: both;
}
.pad {
    margin: 10px;
    padding: 1px;
}
-->
</style>

<body>
<div id="container">
  <div id="column_left">
    <div class="pad">
     <p>Left Column</p>
    </div>
  </div>
  <div id="column_middle">
     <div class="pad">
     <p>Middle Content</p>
     </div>
  </div>
  <div id="column_right">
  <div class="pad">
     <p>right content</p>
    </div>
  </div>
  <div class="breaker"></div>
</div>


</body>
</html>

Видишь, сколько чище это выходит?Поместите ваши стили в таблицу стилей, и это сокращается до ОЧЕНЬ нескольких строк кода для базового макета.

0 голосов
/ 01 апреля 2011

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

<html>
<body>
<table border="1">
 <tr>
  <td height="1">

   1st cell 1st cell<br/>
   1st cell 1st cell<br/>
   1st cell 1st cell<br/>
   1st cell 1st cell<br/>

  </td>
...