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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (57)

我想创建没有<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/

提问于
用户回答回答于

扫码关注云+社区

领取腾讯云代金券