CSS таблица макетов с плавной шириной - PullRequest
Новая
       14

CSS таблица макетов с плавной шириной

1 голос
/ 10 декабря 2011

Я искал способ создать следующую таблицу HTML с помощью CSS: 

<style type="text/css">
    table.frm tr td { vertical-align: top; padding-right: 10px; }
</style>

<table class="frm">
  <tr>
    <td rowspan="2">Label 1:</td>
    <td><input type="text" /></td>
    <td rowspan="2">Label 2:</td>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <td>Validation Message 1</td>
    <td>Validation Message 2</td>
  </tr>
  <tr>
    <td rowspan="2">Label 3:</td>
    <td><input type="text" /></td>
    <td rowspan="2">Label 4:</td>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <td>Validation Message 3</td>
    <td>Validation Message 4</td>
  </tr>
</table>

Проблема, с которой я столкнулся, пытаясь заменить это на div, состоит в том, что я не могу выровнять и столбцы и строки. Я пытался использовать поплавки для выравнивания столбцов, но затем я теряю вертикальное выравнивание строк. Но если я использую очистку для выравнивания строк, я теряю горизонтальное выравнивание столбцов.

Многие примеры, которые я видел для преобразования таблиц в div, используют фиксированную или процентную ширину, но я хочу, чтобы макет имел такое же динамическое поведение таблицы, поскольку сообщения проверки могут появляться или не появляться, а метки / поля будет иметь различные размеры.

Есть ли дизайнер, который может показать мне, как можно добиться этого макета без таблиц?

Ответы [ 3 ]

2 голосов
/ 11 декабря 2011

Это не проблема с display (CSS2), но для этого требуется IE7 +. Пожалуйста, смотрите этот пример скрипки :

Markup: 

<form>
    <span>
        <label for="edit1">First label:</label><input id="edit1" type="text" />
        <label for="edit2">Second label:</label><input id="edit2" type="text" />
    </span>
    <span>
        <br /><p>That sounds right!</p>
        <br /><p>Problem!</p>
    </span>        
    <span>
        <label for="edit3">3:</label><input id="edit3" type="text" />
        <label for="edit4">Fourth and last label:</label><input id="edit4" type="text" />
    </span>
    <span>
        <br /><p>No succes. Try again and enter another value.</p>
        <br /><p>Wait...</p>
    </span>        
</form>

Таблица стилей: 

form {
    display: table;
}
form span {
    display: table-row;
}
form span * {
    vertical-align: top;
    padding-right: 10px;
    display: table-cell;
}
0 голосов
/ 11 декабря 2011

Проблема, с которой вы сталкиваетесь, заключается в том, что вы смотрите на каждую ячейку как на свой маленький блок данных. Вам нужно посмотреть на картину в целом. Что это за сбор данных? Это на самом деле список вещей? Это относится к ul или dl?

Не пытайтесь сделать так, чтобы это выглядело как таблица с разными элементами, когда она вообще не является таблицей. И таблицы никогда не должны использоваться для разметки.

0 голосов
/ 10 декабря 2011

Текучая среда - это очень расплывчатый термин. Под текучей средой вы имеете в виду, что его ширина может увеличиваться и уменьшаться, как таблица для экранов разных размеров, или когда размер окна браузера изменяется? Или вы хотите, чтобы ширины столбцов все соответствовали той же ширине, что и ячейка с самым длинным / самым большим содержимым?

Первое сделано так 

<div style="position: absolute; width: 100%;">
    <div style="position: relative; width: 100%; clear: both;">
        <div style="position: relative; width: 50%; float: left;"> </div>
        <div style="position: relative; width: 50%; float: left;"> </div>
    </div>
    <div style="position: relative; width: 100%; clear: both;">
        <div style="position: relative; width: 50%; float: left;"> </div>
        <div style="position: relative; width: 50%; float: left;"> </div>
    </div>
</div>

Это должно имитировать две строки с двумя столбцами в каждой строке, а ширина зависит от размера экрана.

Второй с настройкой столбцов в зависимости от размера контента. 

<div style="position: absolute; width: 100%;">
    <div style="position: relative; float: left;">
        <div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
        <div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
    </div>
    <div style="position: relative; float: left;">
        <div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
        <div style="position: relative; min-width: 1%; max-width: 75%;"> </div>
    </div>
</div>

Это два столбца с двумя строками в каждом. Установите «min-width» и «max-width» на все, что вам нужно. Я не думаю, что у меня когда-либо была причина протестировать что-то подобное, поэтому, если это не сработает, вы можете попробовать установить «display: inline» для каждой строки.

И если ни один из этих способов не работает, попробуйте опубликовать свой тестовый код. Я уверен, что вы можете сделать таблицы из divs. Некоторое время назад, после нескольких лет неиспользования таблиц, я случайно создал сайт, который должен был использовать таблицы из div-ов. То, что вы хотите сделать, можно сделать, это всего лишь вопрос работы с CSS.

...