Отображение CSS: table-row не расширяется, если ширина установлена на 100%

Question 1

У меня небольшая проблема. Я использую 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

В чем дело?

Question 2

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

<tr style="width:100%">
    <td>Type</td>
    <td style="float:right">Name</td>
</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;
}

Question 3

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

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

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;
}

Question 4

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

Question 5

отдать на .view-typeзанятие float:left;или удалить float:right;из.view-name

изменить: например, оберните свой div <div class="view-row">другим div<div class="table">

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

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

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

Question 6

Вы можете вложить ячейку таблицы прямо в таблицу. Тебе нужен стол. Запуск с таблицей-строкой не работает. Попробуйте с этим 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>

Answer 1

У меня небольшая проблема. Я использую 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

В чем дело?

Answer 2

90

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

<tr style="width:100%">
    <td>Type</td>
    <td style="float:right">Name</td>
</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;
}

КП.
источник

11

+5 за избавление от проклятых поплавков!

приятель шанс

37

-1 потому что объяснение просто неверное. Согласно спецификации CSS2.1 рассматриваемая разметка / CSS должна работать.

user123444555621

8

Ни один браузер не имеет никаких проблем с отсутствующей таблицей (Firefox 3.0 был ...) Реальная проблема заключается в том , что ширина установка на строках таблицы полностью игнорируется . (что означает, что разметка / CSS, о которых идет речь, на самом деле не работают

должным

3

Это неверный ответ. Наценка автора правильная. Как говорит Pumbaa80, проблема заключается в предположении, что ширина должна быть на уровне строки, а не на уровне таблицы. Ширина интерпретируется только на уровне таблицы. Ряды можно полностью опустить. Смотрите мой полный ответ ниже.

Амин Ариана

1

Я не комментировал ответ, который работает. Я комментировал ваш комментарий о том, что вы должны включить строку таблицы в CSS. Вы этого не сделаете. Сказать, что что-то является псевдодостоверным из-за ваших личных убеждений, - это очень догматичный / жесткий высказывание; Особенно, когда CSS был полностью действующим.

Билл Росмус

Answer 3

11

+5 за избавление от проклятых поплавков!

приятель шанс

Answer 4

37

-1 потому что объяснение просто неверное. Согласно спецификации CSS2.1 рассматриваемая разметка / CSS должна работать.

user123444555621

Answer 5

8

Ни один браузер не имеет никаких проблем с отсутствующей таблицей (Firefox 3.0 был ...) Реальная проблема заключается в том , что ширина установка на строках таблицы полностью игнорируется . (что означает, что разметка / CSS, о которых идет речь, на самом деле не работают

должным

Answer 6

3

Это неверный ответ. Наценка автора правильная. Как говорит Pumbaa80, проблема заключается в предположении, что ширина должна быть на уровне строки, а не на уровне таблицы. Ширина интерпретируется только на уровне таблицы. Ряды можно полностью опустить. Смотрите мой полный ответ ниже.

Амин Ариана

Answer 7

1

Я не комментировал ответ, который работает. Я комментировал ваш комментарий о том, что вы должны включить строку таблицы в CSS. Вы этого не сделаете. Сказать, что что-то является псевдодостоверным из-за ваших личных убеждений, - это очень догматичный / жесткий высказывание; Особенно, когда CSS был полностью действующим.

Билл Росмус

Answer 8

56

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

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

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;
}

Амин Ариана
источник

Ваш ответ предлагает CSS-эквивалент, <table><td></td></table>который сам по себе был бы недопустимой разметкой HTML согласно W3C. Хотя он будет проверять, зачем вам предлагать браузеру имитировать эту разметку?

КП.

16

Это соответствует правилам CSS: w3.org/TR/CSS2/tables.html#anonymous-boxes . Его легче поддерживать, удалив ненужные строки кода (например, ненужный div <view-row>, предложенный KP.). Это мне помогло ... Пользуюсь. +1

Билл Росмус

1

Разве не было бы достаточно просто избавиться от операторов с плавающей запятой? Div .view может сохранить свойство display: table-row.

Идеограмма

1

Это хорошо, ~~ но не работает в IE9, насколько я могу судить. ~~ Я ошибаюсь. Здорово! :)

f1lt3r

Конечно, display: table бесполезен, если у вас более 1 строки. Все они плохо выровнены

edc65

Answer 9

Ваш ответ предлагает CSS-эквивалент, <table><td></td></table>который сам по себе был бы недопустимой разметкой HTML согласно W3C. Хотя он будет проверять, зачем вам предлагать браузеру имитировать эту разметку?

КП.

Answer 10

16

Это соответствует правилам CSS: w3.org/TR/CSS2/tables.html#anonymous-boxes . Его легче поддерживать, удалив ненужные строки кода (например, ненужный div <view-row>, предложенный KP.). Это мне помогло ... Пользуюсь. +1

Билл Росмус

Answer 11

1

Разве не было бы достаточно просто избавиться от операторов с плавающей запятой? Div .view может сохранить свойство display: table-row.

Идеограмма

Answer 12

1

Это хорошо, ~~ но не работает в IE9, насколько я могу судить. ~~ Я ошибаюсь. Здорово! :)

f1lt3r

Answer 13

Конечно, display: table бесполезен, если у вас более 1 строки. Все они плохо выровнены

edc65

Answer 14

16

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

Джон Карни
источник

4

То же самое было указано в CSS 2.1 , раздел 17.2.1, начало 3.2. Пример HBOX / VBOX ниже - это именно тот случай, о котором идет речь. Похоже, браузерам все равно.

user123444555621

Answer 15

4

То же самое было указано в CSS 2.1 , раздел 17.2.1, начало 3.2. Пример HBOX / VBOX ниже - это именно тот случай, о котором идет речь. Похоже, браузерам все равно.

user123444555621

Answer 16

1

отдать на .view-typeзанятие float:left;или удалить float:right;из.view-name

изменить: например, оберните свой div <div class="view-row">другим div<div class="table">

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

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

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

Сотирис
источник

Тестировал с ff3.6, т.е. 8, хром, опера. Вы можете увидеть это здесь jsbin.com/ifiyo/4, они показывают их бок о бок

Сотирис,

Я хотел, чтобы имя было крайним справа, напечатайте в крайнем левом углу ... если вы сделаете display: inline на обоих и выньте display: table-row, это работает, я подумал, что может быть лучший способ сделайте это, используя свойства table-row / cell.

приятель шанс

Answer 17

Тестировал с ff3.6, т.е. 8, хром, опера. Вы можете увидеть это здесь jsbin.com/ifiyo/4, они показывают их бок о бок

Сотирис,

Answer 18

Я хотел, чтобы имя было крайним справа, напечатайте в крайнем левом углу ... если вы сделаете display: inline на обоих и выньте display: table-row, это работает, я подумал, что может быть лучший способ сделайте это, используя свойства table-row / cell.

приятель шанс

Answer 19

Вы можете вложить ячейку таблицы прямо в таблицу. Тебе нужен стол. Запуск с таблицей-строкой не работает. Попробуйте с этим 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>

Отображение CSS: table-row не расширяется, если ширина установлена ​​на 100%

Ответы:

Отображение CSS: table-row не расширяется, если ширина установлена на 100%