Question

我想创建不包含<table>元素的表并替换为

指向“ ul”的表

tr转换为“ li”

td转换为“ div”

但所有表格单元格的宽度均不等于前行

CSS代码

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    float: left;
    display: table;
}
.td {
    float: none;
    width: 1%;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    padding: 5px 10px;
    display: table-cell;
}

HTML

<ul class="table">
<li class="tr">
        <div class="td">1</div>
        <div class="td">aaaa</div>
        <div class="td">zzzzzzz</div>
    </li>
    <li class="tr">
        <div class="td">2</div>
        <div class="td">nnbnb</div>
        <div class="td">;;;;;;;</div>
    </li>
    <li class="tr">
        <div class="td">3</div>
        <div class="td">qqssqqq</div>
        <div class="td">zzzzzsdafsfzz</div>
    </li>
    <li class="tr">
        <div class="td">4</div>
        <div class="td">aasdfs</div>
        <div class="td">zzzzzzz</div>
    </li>
    <li class="tr">
        <div class="td">5</div>
        <div class="td">ddssssssddd</div>
        <div class="td">zzzzzzz</div>
    </li>
</ul>

或访问https://jsfiddle.net/pirune/k2abyf64/18/

Answer 1

添加以下CSS：

.tr {
  display: table-row;
}

更新的小提琴：https://jsfiddle.net/bd8ceuvj/

如何使用ul> li> div使用显示表格单元格自动宽度100％

1 个答案: