我如何使用html，css来做到这一点？不是表格标签，只使用列表标签 ex) <li> <ol> <ul>

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

类似于下面的代码片段。

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/"

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

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

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

提前谢谢。

最好的方法是在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>

参考小提琴

这里

您可以使用无序列表和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;
}

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

<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

相关内容

最新更新

热门标签：