带有 DataList 和 DIV 的水平表？

发布于 2024-11-02 16:23:44 字数 2163 浏览 4 评论 0 原文

我正在尝试创建一个表格布局，标题位于左侧，字段水平对齐。（请参见下面的模型。）我尝试使用 DataList 来完成此操作（使用 .NET 2.0），并将其包装在 x 轴上带有滚动条的 div 中，以便如果有足够的组可见，则滚动将会出现栏。

               Group One      Group Two      Group Three
Header One      Value          Value          Value
Header Two      Value          Value          Value
Header Three    Value          Value          Value

我正在努力解决两点，都在下面的代码和 jsFiddle 中看到。

如何将 #itm 块保持在一行中而不在 #wrapper 上显式定义宽度？
- 空白：#wrapper 上的 nowrap 在这里起作用。
即使数据应垂直扩展其父 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; }

原文

I'm trying to create a table layout with headers on the left and horizontally aligned fields. (See mock-up below.) I'm trying to accomplish this using a DataList -- stuck with .NET 2.0 -- and wrapped in a div with a scrollbar on the x-axis so that if enough groups are visible, a scroll bar will appear.

               Group One      Group Two      Group Three
Header One      Value          Value          Value
Header Two      Value          Value          Value
Header Three    Value          Value          Value

I'm struggling with two points, both seen in the below code and jsFiddle.

How do I keep the #itm blocks in a single line without explicitly defining a width on the #wrapper?
- white-space: nowrap on #wrapper works here.
How do I keep a consistent height on rows, even if data should vertically expand its parent DIV?
- Setting an explicit height will work for me, given an approximate field length.

Original jsFiddle: http://jsfiddle.net/D6yXV/1/

Updated with fixes: 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; }

分享到QQ

分享到微博