Как заставить TD быть определенной высоты с CSS? - PullRequest
Новая
       0

Как заставить TD быть определенной высоты с CSS?

4 голосов
/ 13 марта 2011

Хотя некоторые вопросы похожие на этот вопрос уже задавались ранее, этот немного отличается.

У меня есть таблица, которая выглядит примерно так: 

<table>
 <tr>
  <td style="height: 100px;">
   <img src="..." style="height: 100px;" />
   <img src="..." style="height: 100px; position: relative; top: -100px;" />
  </td>
 </tr>
</table>

Это наложит второе изображение на первое. Однако, td настаивает на том, чтобы быть 200px высоким , хотя есть только 100px содержимого . Установка высоты td ничего не делает, что согласуется с ответами на другие вопросы.

Однако у меня нет возможности встроить содержимое в DIV и установить высоту 100px, потому что td будет по-прежнему настаивать на том, чтобы быть 200px высоким.

Как я могу сказать от td до просто быть 100px ростом?

Редактировать: О, и об абсолютном позиционировании тоже не может быть и речи, потому что на странице происходит много манипуляций с DOM, а вещи перемещаются - в то время как вещи с абсолютно позиционированием - нет.

Редактировать: jsFiddle пример можно найти здесь .

Ответы [ 5 ]

9 голосов
/ 13 марта 2011

Это не имеет ничего общего с td на самом деле, но с природой position: relative.Пространство относительного элемента остается зарезервированным в потоке документа.

Избавьтесь от relative и используйте вместо него position: absolute на первом изображении.

Редактировать: I только что увидел ваше редактирование.Хммм.Мышление.

На ум приходят две идеи:

  • Пощечина overflow: hidden на td

  • Еслиэто не работает во всех браузерах или недействительно (сейчас я не уверен на 100%). Поместите два изображения в <div height='100px;'> и добавьте overflow: hidden.

0 голосов
/ 09 января 2013

Вместо использования положения относительно второго изображения для его перемещения и наложения используйте отрицательное поле.

Измените это. 

<img src="..." style="height: 100px; position: relative; top: -100px;" />

Использование: 

<img src="..." style="height: 100px; margin-top:-100px" />

Таким образом, оно на самом деле будет перемещать изображение вверх, и тогда TD будет охватывать только 100 пикселей.

0 голосов
/ 13 марта 2011

Содержимое составляет 200px, поскольку position:relative не освобождает пространство, занимаемое объектом до его перемещения. Вам НУЖНО использовать абсолютное положение и, вероятно, внутренний DIV, потому что такие вещи, как переполнение, имеют тенденцию вызывать проблемы в TD.

0 голосов
/ 13 марта 2011

Наложение второго изображения в ячейку таблицы: 

<html>
<head>
<style>
    table {border:1px solid #898989;}
    td {border:1px solid #0090aa; overflow:hidden; height: 100px;}
    td div {position:relative;}
    .col1 {width:80px;}
    .col1 {width:128px;}
    .over {position:absolute; top:0; left:0; }
    .under {}
</style>
</head>

<body>
    <table>
        <tr>
            <td class="col1">1</td>
            <td>
                <div>
                   <img class="under" src="blank_file.png"  />
                   <img class="over" src="19.png"  />
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
0 голосов
/ 13 марта 2011

Объявление 

<td style="height: 100px; width:100px; overflow:hidden"> ...

должен вам помочь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...