Відображення CSS: рядок таблиці не розширюється, коли ширина встановлена на 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

Перевірена відповідь:

У CSV-рядку .view змініть:

display:table-row;

до:

display:table

і позбутися "плавати" . Все буде працювати, як очікувалося.

Як було запропоновано в коментарях, немає потреби в обгортковому столі. CSS дозволяє опускати неявні рівні деревної структури (в даному випадку рядки). Причина, по якій ваш код не працює, полягає в тому, що "width" можна інтерпретувати лише на рівні таблиці, а не на рівні рядка таблиці. Коли у вас є "таблиця", а потім "таблиця-комірка" безпосередньо під ними, вони неявно інтерпретуються як сидячі в ряду.

Робочий приклад:

<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

Ви можете вкласти комірку таблиці безпосередньо в таблицю. У вас у линьки стіл. Запуск eith табличного рядка не працює. Спробуйте за допомогою цього 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: рядок таблиці не розширюється, коли ширина встановлена ​​на 100%

Відображення CSS: рядок таблиці не розширюється, коли ширина встановлена на 100%