我如何使用 html、css 制作这样的作品？ 不是表格标签，只需使用列表标签例如）<li><ol><ul>

Question

我的测试项目有一个小任务，我必须制作一个像表格一样的列表视图。

类似于下面的片段。

 function highlight(e) { if (selected[0]) selected[0].className = ''; e.target.parentNode.className = 'selected'; } var table = document.getElementById('table'), selected = table.getElementsByClassName('selected'); table.onclick = highlight; function fnselect(){ var $row=$(this).parent().find('td'); var clickeedID=$row.eq(0).text(); // alert(clickeedID); } $("#tst").click(function(){ var value =$(".selected td:first").html(); value = value || "No row Selected"; alert(value); });

 td {border: 1px #DDD solid; padding: 5px; cursor: pointer;} .selected { background-color: brown; color: #FFF; }

 <table id="table"> <tr> <td>1 Ferrari F138</td> <td>1 000€</td> <td>1 200€</td> <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td> <td>1</td> <td>F138</td> <td>Klik pre detaily</td> </tr> <tr> <td>2 Ferrari F138</td> <td>1 000€</td> <td>1 200€</td> <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td> <td>1</td> <td>F138</td> <td>Klik pre detaily</td> </tr> <tr> <td>3 Ferrari F138</td> <td>1 000€</td> <td>1 200€</td> <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td> <td>1</td> <td>F138</td> <td>Klik pre detaily</td> </tr> </table> <input type="button" id="tst" value="OK" onclick="fnselect()" />

此代码来自' http://jsfiddle.net/sunil_hari/Z22NU/17/ '

在此，我想用 html 中的列表标签<ul> <li>替换表格标签<th> <td> 。

这是我导师的要求，对我来说非常困难，因为我不熟悉 UI（html、css）。

请给我一些建议或例子来实现这个使命。

提前致谢。

Answer 1

最好的方法是在 css 中使用table display属性。 因为自动 - 单元格调整将在table视图中得到注意，并且除了合并单元格之外，在使用显示属性时可以使用使用tr td table所有功能。 我已经尝试了一些，请看一下。 只是单独使用 css。

 div{ display:table; border-collapse:sepearte } ul{ display:table-row } li{ display:table-cell; border:1px solid #dfdfdf; padding:5px; }

 <div> <ul> <li> 1 Ferrari F138 </li> <li> 1 200€ </li> <li> 1 200€ </li> <li> odel monopostu stajne Scuderia Ferrari pre sezónu 2013 </li> <li> 1 200€ </li> </ul> <ul> <li> 1 Ferrari F138 </li> <li> 1 200€ </li> <li> 1 200€ </li> <li> odel monopostu stajne Scuderia Ferrari pre sezónu 2013 </li> <li> 1 200€ </li> </ul> <ul> <li> 1 Ferrari F138 </li> <li> 1 200€ </li> <li> 1 200€ </li> <li> odel monopostu stajne Scuderia Ferrari pre sezónu 2013 </li> <li> 1 200€ </li> </ul> <ul> <li> 1 Ferrari F138 </li> <li> 1 200€ </li> <li> 1 200€ </li> <li> odel monopostu stajne Scuderia Ferrari pre sezónu 2013 </li> <li> 1 200€ </li> </ul><ul> <li> 1 Ferrari F138 </li> <li> 1 200€ </li> <li> 1 200€ </li> <li> odel monopostu stajne Scuderia Ferrari pre sezónu 2013 </li> <li> 1 200€ </li> </ul> </div>

请参阅此处的小提琴

Answer 2

您可以使用无序列表和 div 元素来实现表格效果

    <div class="wrapper">
    <ul class="itemrow">
        <li><div>1one</div></li>
        <li><div>1two</div></li>
        <li><div>1three</div></li>

    </ul>
  <ul class="itemrow">
        <li><div>2one</div></li>
        <li><div>2two</div></li>
        <li><div>2three</div></li>

    </ul>
  <ul class="itemrow">
        <li><div>3one</div></li>
        <li><div>3two</div></li>
        <li><div>3three</div></li>

    </ul>
</div>

这将是你的 css

.wrapper{
    width:600px;
}
.itemrow{
    margin:0;
    padding:0;
}

.itemrow li{
    float:left;
    margin-bottom:0px;
}
.itemrow li div{
    width:198px;
   border-style:solid;
    border-width: 1px;
    border-color:black;
}

Answer 3

简单地说，您可以使用以下代码使用<ul> <li>标签创建一个类似于 table 的视图：

<ul style="list-style: none outside none;">
    <li style="float: left;display: block;width: 100px;height: 40px;">Sample Data 1</li>
    <li style="float: left;display: block;width: 100px;height: 40px;">Sample Data 2</li>
    <li style="float: left;display: block;width: 100px;height: 40px;">Sample Data 3</li>
</ul>

编辑：

注意：您可以在上面的代码中根据您的要求更改高度宽度。

这是一篇不错的文章，它很可能解释了您需要做什么：

http://alistapart.com/article/taminglists