Я пытаюсь создать макет таблицы с заголовками слева и горизонтально выровненными полями.(См. Макет ниже.) Я пытаюсь сделать это, используя DataList - привязанный к .NET 2.0 - и завернутый в div с полосой прокрутки на оси x, так что, если видно достаточно групп, прокруткапоявится строка.
Group One Group Two Group Three
Header One Value Value Value
Header Two Value Value Value
Header Three Value Value Value
Я борюсь с двумя точками, как видно из приведенного ниже кода, так и с помощью jsFiddle.
- Как сохранить блоки #itm в одномлиния без явного определения ширины в #wrapper?
- пробел: здесь работает nowrap на #wrapper.
- Как сохранить постоянную высоту строк, даже если данные должны располагаться вертикальнорасширить родительский DIV?
- Установка явной высоты будет работать для меня, учитывая приблизительную длину поля.
Оригинал jsFiddle: http://jsfiddle.net/D6yXV/1/
Обновлено с исправлениями: http://jsfiddle.net/D6yXV/7/
HTML:
<div id="hdr">
<label>Header One</label>
<label>Header Two</label>
<label class="highlight">Header Three</label>
<label>Header Four</label>
</div>
<div id="itm">
<span>Some Data</span>
<span>More Data</span>
<span class="highlight">Even More Data</span>
<span>No More Data</span>
</div>
<div id="itm">
<span>Some Data</span>
<span>More Data</span>
<span class="highlight">Actually, this is a large field and could stretch the row out some.</span>
<span>Even More Data</span>
</div>
<div id="itm">
<span>Some Data</span>
<span>More Data</span>
<span class="highlight">Even More Data</span>
<span>No More Data</span>
</div>
</div>
CSS:
#wrapper { overflow-x: auto; }
#hdr, #itm { display: inline-block; padding: 3px; width: 150px; }
#itm { border-left: solid 1px #000; }
#hdr label { font-weight: 700; display: block; }
#itm span { display: block; }
.highlight { background-color: #EEE; }