如何在不使用表的情况下生成这两个列表?

http://jsfiddle.net/pkLMC/

http://jsfiddle.net/pkLMC/

the left column should shrink to fit, and the right column should take up the remainder of the width of the page. It needs to work with IE7 as well

左边的列应该收缩以适应，右边的列应该占据页面宽度的剩余部分。它也需要与IE7一起工作

image of issue

的形象问题

<style>
table
{
    width:100%;
    border:1px solid black;
}
td
{
    vertical-align:top;
    border:1px solid green;
    background-color:orange;
}
.left
{
    /* trim the column to the minimum necessary width required to avoid overflow */
    width:1px;
}
.long
{
    /* this layout works whether the content of the right column wraps or not */
    /* display:none; */
}
</style>

<table>
<tr><td class="left">ABC</td><td>Lorem ipsum dolor</td></tr>
<tr><td class="left">ABCDE</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td></tr>
<tr class="long"><td class="left">ABCDEFG</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td></tr>
<tr class="long"><td class="left">ABCDEFGHI</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td></tr>
<tr class="long"><td class="left">ABCDEFGHIJK</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td></tr>
</table>

6 个解决方案

#1

The data you present in your example is tabular in nature in that it has both rows and columns. Css without HTML tables is good for formatting stuff in columns (like a newspaper). Once you have both rows and columns with variable width columns (like your data), tables (/table, /tr, /td, etc.) is the way to go.

您在示例中呈现的数据本质上是表格式的，因为它具有行和列。没有HTML表的Css很适合在列(如报纸)中格式化内容。一旦有了具有可变宽度列的行和列(如数据)，就需要使用表(/table、/tr、/td等)。

You might want to stripe your rows. Here is an example: http://jsfiddle.net/peavU/

您可能想要条纹您的行。这里有一个例子:http://jsfiddle.net/peavU/

#2

Something to keep in mind is that using tables for layout is not a bad thing at all IF the information you're presenting is tabular in nature.

需要记住的是，如果您所呈现的信息本质上是列表的，那么使用表进行布局并不是一件坏事。

Using tables to arrange non-tabular data isn't good, but that doesn't mean that tables don't have their place.

使用表来排列非表数据并不好，但这并不意味着表没有它们的位置。

On preview... what @DwB said.

预览…@DwB所说的。

#3

A definition list <dl> is perfect for the type of layout you have on your fiddle.

定义列表

非常适合您的小提琴上的布局类型。

http://www.maxdesign.com.au/articles/definition/

http://www.maxdesign.com.au/articles/definition/

#4

Have you tried using div tags instead? They are more organized, efficient, and can adjust to multiple screen sizes

你试过使用div标签吗?它们更有条理、更高效，并且可以调整到多个屏幕大小。

#5

I agree with both @DwB and @Diodeus. Means, if you have really tabular data, the best you can do is to use tables. But, if your list is actually a list of definitions, then it makes sense to convert to <dl> like in the example:

我同意@DwB和@Diodeus。意味着，如果你有真正的表格数据，你能做的最好的事情就是使用表格。但是，如果您的列表实际上是一个定义列表，那么在示例中转换为

是有意义的:

HTML

HTML

<dl>
    <dt>THIS IS THE TITLE</dt>
    <dd>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</dd> 

    <dt>THIS IS ANOTHER TITLE</dt>
    <dd>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</dd>
</dl>

CSS

CSS

dl {
    width: 100%;
    background: Orange;
    margin: 0;
    padding: 0;
}
dt {
    width: 10em;
    clear: left;
    float: left;
    padding: 1em;
    border-top: 1px solid #fff;
}
dd {
    margin-left: 12em;
    padding: 1em;
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;    
}

#6

I can get a bit crazy using lists, but here is my two cents...with a jsFiddle example: Table like layout using lists

使用列表我可能会有点疯狂，但这是我的两点……使用一个jsFiddle示例:使用列表的类似表的布局

The code should resize and the text won't wrap, utilizing the "text-overflow: ellipsis;" css rule.

使用“text-overflow:省略号;”css规则，代码应该调整大小，文本不会包装。

HTML:

HTML:

<ul>
<!-- "table" header" -->
<li class="col1 th">Column 1 header</li>
<li class="col2 th">Column 2 header</li>
<!-- "table" rows -->
<li class="col1">data</li>
<li class="col2">data</li>
<li class="col1">data</li>
<li class="col2">data</li>
<li class="col1">data</li>
<li class="col2">data</li>
<li class="col1">data</li>
<li class="col2">data</li>
<li class="col1">data</li>
<li class="col2">data</li>

CSS:

CSS:

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
ul {
    border: 1px solid #333;
    list-style-type: none;
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
ul:after {
    content:"";
    display: table;
    clear: both;
}
.col1, .col2{
    float: left;
    text-align: left;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    padding: .25em;
    white-space: nowrap;
    width: 100%;                   
    overflow: hidden; 
    text-overflow:    ellipsis;
}
.col1 {
    clear: left;
    width: 30%;
}
.col2{
    width: 70%;
}
.th {
    font-weight: bold;
    text-align: center;
}

Hopefully that helps!

希望这可以帮助!