Отображение CSS: строка таблицы не расширяется, если ширина установлена ​​на 100% - PullRequest
Новая
       1

Отображение CSS: строка таблицы не расширяется, если ширина установлена ​​на 100%

91 голосов
/ 13 августа 2010

У меня небольшая проблема. Я использую FireFox 3.6 и имею следующую структуру DOM: 

<div class="view-row">
    <div class="view-type">Type</div>
    <div class="view-name">Name</div>                
</div>

И следующий CSS: 

.view-row {
width:100%;
display:table-row;
}

.view-name {
display: table-cell;
float:right;
}

.view-type {
display: table-cell;
}

Если я сниму display:table-row, он будет отображаться правильно, а view-row показывает ширину 100%. Если я положу его обратно, он сжимается. Я поднял это на JS Bin:

http://jsbin.com/ifiyo

Что происходит?

Ответы [ 5 ]

83 голосов
/ 13 августа 2010

Если вы используете display:table-row и т. Д., То вам нужна правильная разметка, которая включает в себя таблицу содержания. Без этого ваш исходный вопрос в основном обеспечивает эквивалентную неправильную разметку: 

<tr style="width:100%">
    <td>Type</td>
    <td style="float:right">Name</td>
</tr>

Где таблица выше? Вы не можете просто получить строку из ниоткуда (tr должен содержаться в table, thead, tbody и т.

Вместо этого добавьте внешний элемент с display:table, поместите ширину 100% на содержащий элемент. Две внутренние ячейки автоматически перейдут на 50/50 и выровняют текст прямо на второй ячейке. Забудьте floats с элементами таблицы. Это вызовет так много головных болей.

Разметка: 

<div class="view-table">
    <div class="view-row">
        <div class="view-type">Type</div>
        <div class="view-name">Name</div>                
    </div>
</div>

CSS: 

.view-table
{
    display:table;
    width:100%;
}
.view-row,
{
    display:table-row;
}
.view-row > div
{
    display: table-cell;
}
.view-name 
{
    text-align:right;
}
54 голосов
/ 17 августа 2012

Проверенный ответ:

В .view-строке css измените: 

display:table-row;

до: 

display:table

и избавиться от "поплавка" . Все будет работать как положено.

Как было предложено в комментариях, нет необходимости в упаковочной таблице. CSS позволяет пропустить уровни неявной структуры дерева (в данном случае строк). Причина, по которой ваш код не работает, заключается в том, что «ширина» может интерпретироваться только на уровне таблицы, а не на уровне строк таблицы. Когда у вас есть «таблица», а затем «ячейка таблицы», расположенная непосредственно под ними, они неявно интерпретируются как сидящие в ряду.

Рабочий пример: 

<div class="view">
    <div>Type</div>
    <div>Name</div>                
</div>

с помощью css: 

.view {
  width:100%;
  display:table;
}

.view > div {
  width:50%;
  display: table-cell;
}
16 голосов
/ 13 сентября 2011

Обратите внимание, что в соответствии со спецификацией CSS3 вам не нужно оборачивать макет в элемент стиля таблицы. Браузер определит наличие содержащихся элементов, если они не существуют.

1 голос
/ 13 августа 2010

дать .view-type класс float:left; или удалить float:right; из .view-name

edit: Обернуть ваш div <div class="view-row"> другим div, например <div class="table">

и установите следующее css: 

.table {
    display:table;
    width:100%;}

Для правильных результатов необходимо использовать структуру таблицы.

0 голосов
/ 31 октября 2011

Вы можете вкладывать ячейки таблицы прямо в таблицу. У тебя не должно быть стола. Запуск с таблицей-строкой не работает. Попробуйте это с этим HTML: 

<html>
  <head>
    <style type="text/css">
.table {
  display: table;
  width: 100%;
}
.tr {
  display: table-row;
  width: 100%;
}
.td {
  display: table-cell;
}
    </style>
  </head>
  <body>

    <div class="table">
      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>
    </div>

      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>

    <div class="table">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
    </div>

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

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

...