CSS-эквивалент таблицы Rowspan с высотой жидкости - PullRequest
Новая
       17

CSS-эквивалент таблицы Rowspan с высотой жидкости

13 голосов
/ 10 апреля 2010

Я пытаюсь выполнить следующее с помощью CSS: 

<table border="1" width="300px">
<tr>
    <td rowspan="2">This row should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.</td>
    <td>Here is some sample text.  And some additional sample text.</td>
</tr>
<tr>
    <td>Here is some sample text.  And some additional sample text.</td>
</tr>
</table>

alt text

Примеры, которые я видел для достижения этой цели, используют фиксированные высоты или позволяют обернуть содержимое вокруг левой колонки. Есть ли элегантный способ сделать это с помощью CSS?

Ответы [ 3 ]

5 голосов
/ 10 апреля 2010

Прежде всего, то, что вы делаете, для меня выглядит как стол, так что вы можете подумать об этом. Однако сделать это с помощью CSS немного сложнее (если только вы не выполняете стилизацию таблиц в CSS). Следующий код работает, но не центрирует текст по центру по вертикали: 

<html><head><title>Test2</title></head><body>
<div style="width:300px; padding: 2px; border: 1px solid black;">
  <div style="float:right; width: 100px;">
    <div style="border: 1px solid black; margin-bottom: 2px;">
      Here is some sample text. And some additional sample text.
    </div>
    <div style="border: 1px solid black;">
      Here is some sample text. And some additional sample text.
    </div>
  </div>
  <div style="border: 1px solid black; margin-right: 102px;">
    <div>
      This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
    </div>
    <div style="clear: right; margin-bottom: -1px;"></div>
  </div>
</div></body></html>

Ячейки таблицы в CSS проще: 

<!DOCTYPE html>
<html><head><title>Test2</title></head><body>
<div style="display: table; width:300px; border: 1px solid black; border-spacing: 2px;">
  <div style="display: table-cell; border: 1px solid black; vertical-align: middle;">
    This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.
  </div>
  <div style="display: table-cell; width: 100px;">
    <div style="border: 1px solid black; margin-bottom: 2px;">
      Here is some sample text. And some additional sample text.
    </div>
    <div style="border: 1px solid black;">
      Here is some sample text. And some additional sample text.
    </div>
  </div>
</div>
</body>
</html>
4 голосов
/ 03 мая 2013

Мне нужно что-то очень похожее.К сожалению, все эти решения довольно сложны, я пришел с чем-то очень простым (может быть, слишком простым) - использовал display: inline-block

HTML 

<div>
    <span id="v">
        text in the left
    </span>
    <div id="x">
        <div>upper row</div>
        <div>lower row</div>
    </div>
</div>

CSS 

#x {
    display: inline-block;
    vertical-align: middle;
}

скрипка

0 голосов
/ 10 апреля 2010

Вот что я использую: http://www.ejeliot.com/samples/equal-height-columns/example-7.html

Я бы просто использовал второй столбец в качестве оболочки для двух других элементов (менее семантический). Это должен быть самый простой способ.

...