首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何通过ul > li > div使用显示表格单元格自动宽度100%

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

Stack Overflow用户
提问于 2019-06-13 02:53:07
回答 1查看 478关注 0票数 0

我想创建不带<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/

EN

回答 1

Stack Overflow用户

发布于 2019-06-13 03:43:28

添加以下CSS:

.tr {
  display: table-row;
}

更新的fiddle:https://jsfiddle.net/bd8ceuvj/

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56568662

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档