水平表中添加DataList和的DIV？ [英] Horizontal Table With DataList And DIVs?

问题描述

我试图创建左侧头和水平排列字段的表布局。 （见下文实体模型）。我试图做到这一点使用一个DataList - 卡与.NET 2.0 - 并与x轴滚动条包裹在一个div，这样如果有足够的群体是可见的，滚动栏将出现。

 组两个一组的三组
头部中的一个值值值
头两个值值值
头三个值值值
 

我在连得两分，双方在以下code和的jsfiddle看到挣扎。

• 如何保持在一个单一的线#itm块，而不对#wrapper指定明确定义的宽度？
  
  
  
  • 空白：在#wrapper指定NOWRAP在这里工作
  
  


• 如何保持对行的高度一致，即使数据应垂直扩展它的父DIV？
  
  
  
  • 设置明确的高度将工作对我来说，给定一个近似的字段长度。
  
  

原始的jsfiddle： http://jsfiddle.net/D6yXV/1/

更新与修正： http://jsfiddle.net/D6yXV/7/

HTML：
    

 ＆LT; D​​IV ID =HDR＆GT;
    ＆LT;标签＆gt;报头的One＆LT; /标签＆gt;
    ＆LT;标签＆gt;头两下和/标签＆gt;
    ＆LT;标签类=亮点＆GT;头三＆LT; /标签＆gt;
    ＆LT;标签＆gt;头四＆LT; /标签＆gt;
＆LT; / DIV＆GT;＆LT; D​​IV ID =ITM＆GT;
    ＆LT;跨度＆GT;有的数据和LT; / SPAN＆GT;
    ＆LT;跨度＆GT;更多的数据和LT; / SPAN＆GT;
    ＆LT;跨度类=亮点＆GT;更多的数据和LT; / SPAN＆GT;
    ＆LT;跨度＆GT;没有更多的数据和LT; / SPAN＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV ID =ITM＆GT;
    ＆LT;跨度＆GT;有的数据和LT; / SPAN＆GT;
    ＆LT;跨度＆GT;更多的数据和LT; / SPAN＆GT;
    ＆LT;跨度类=亮点＆GT;其实，这是一个大领域，并可能拉长排出来的一些与LT; / SPAN＆GT;
    ＆LT;跨度＆GT;更多的数据和LT; / SPAN＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV ID =ITM＆GT;
    ＆LT;跨度＆GT;有的数据和LT; / SPAN＆GT;
    ＆LT;跨度＆GT;更多的数据和LT; / SPAN＆GT;
    ＆LT;跨度类=亮点＆GT;更多的数据和LT; / SPAN＆GT;
    ＆LT;跨度＆GT;没有更多的数据和LT; / SPAN＆GT;
＆LT; / DIV＆GT;＆LT; / DIV＆GT;
 

CSS：

  #wrapper指定{溢出-X：自动; }
#hdr，#itm {显示：inline-block的;填充：的3px;宽度：150像素; }
#it​​m {左边框：1px的固体＃000; }
#hdr标签{字体重量：700;显示：块; }
#it​​m跨度{显示：块; }
.highlight {背景颜色：#EEE; }
 

解决方案

说真的，为什么你们不使用＆LT;表＆gt;的

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; }

解决方案

Seriously why aren't you using <table>'s?

这篇关于水平表中添加DataList和的DIV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！