Свойство table-cell игнорирует ширину

Я установил ячейку таблицы свойств CSS для div. Я также указал ширину для div и установил скрытое переполнение, но из-за свойства table-cell div не заботится о ширине. Если я помещаю любое большое изображение, оно выходит за пределы ширины. Как я могу использовать ячейку таблицы и использовать фиксированную ширину для div?

.right{
    display: table-cell;
    overflow: hidden !important;
    vertical-align: top;
    width: 400px;
}

html css css-tables
person user1251698    schedule 24.10.2012    source источник
comment
Можем ли мы увидеть полный CSS и HTML страницы с проблемой?   -  person Kevin Wang    schedule 24.10.2012

Ответы (2)


arrow_upward
9
arrow_downward

Странно, этот JSFiddle, кажется, работает для меня.

В каком браузере у вас проблемы?

Кроме того, чтобы установить максимальную ширину ячеек таблицы, используйте свойство max-width. Вы можете увидеть его здесь, а код приведен ниже.

HTML:

<div class='table'>
  <div class='tr'>
    <div class='right'>hey</div>
  </div>
</div>​

CSS:

.table {
    display: table;
}
.tr {
    display: table-row;
}
.right{
    display: table-cell;
    overflow: hidden !important;
    vertical-align: top;
    max-width: 400px;
    outline: 1px solid #888;
}​
person jamesplease    schedule 24.10.2012
comment
Это та же ссылка в моем ответе! - person jamesplease; 24.10.2012
comment
Я до сих пор не могу воспроизвести эту проблему: если я помещаю любое большое изображение, оно выходит за пределы ширины. Опять же, в каком браузере и версии вы тестируете? - person jamesplease; 24.10.2012
comment
Вы видите, что я изменил ширину правой стороны в вашем примере на 100 пикселей, а размер изображения превышает 100 пикселей, поэтому он должен скрывать его, но он просто расширяет весь div. Я использую последнюю версию FF. - person user1251698; 24.10.2012

arrow_upward
5
arrow_downward

display: table-cell будет следовать правилам размера таблицы — если содержимое слишком велико, оно увеличится, чтобы подогнать его.

Вам действительно нужно использовать display: table-cell? Чтобы заставить его работать, вам нужно обернуть его в другой div, задать ему ширину 400 и установить его на overflow: hidden, но это кажется контрпродуктивным.

person boz    schedule 24.10.2012