如何在HTML / CSS中创建这样的表？ [附图] [英] How to make such a table in HTML/CSS? [Image attached]

问题描述

所以，我想在图像中提到水平线。像每个coloum这样的匹配它是各自的coloum用虚线。



请参阅图片获取信息。





我想要html / css中定价表的精确副本。



这是图片链接：http：//fs1.directupload.net/images/180614/sbnttx6h.png



我的尝试：



我试过创建一个表。然后连续两个coloum。一个用于写入数据，另一个用于

---

标记。但这只是填补了部分的一半。

SO, i want to make the horizontal line's mentioned in the image. like every coloum such match it's respective coloum with a dashed line.

Please see the image for the information.


I want exact copy of the pricing table in html/css.

Here is the image link : http://fs1.directupload.net/images/180614/sbnttx6h.png

What I have tried:

I have tried creating a table. then in a row make two coloum. one for writing data and other for

---

tag. But that is just filling half of the part.

推荐答案

这样的事情：

Something like this:

<ul class="price-list">
    <li>
        <span class="title">Title</span>
        <span class="spacer"></span>
        <span class="price">

20.00 < / span >
< span class = description > 说明... < / span >
< / li >
< li >
< span class = title > 标题< / span >
< span class = spacer > < < span class =code-leadattribute> / span >
< span class = price >

20.00</span> <span class="description">Description…</span> </li> <li> <span class="title">Title</span> <span class="spacer"></span> <span class="price">

20.00 < / span >
< span class = description > 说明... < / span >
< / li >
...
< / ul >

20.00</span> <span class="description">Description…</span> </li> … </ul>

CSS：

.price-list {
    list-style: none;
    margin: 25px;
    padding: 0;
}
.price-list > li {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

@media (min-width: 500px){
    .price-list {
        column-count: 2;
        column-gap: 25px;
    }
    .price-list > li {
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

.title {
    font-weight: bold;
}
.spacer {
    flex: 1 1 0;
    border-bottom: 2px dotted silver;
}
.price {
    color: gold;
}
.description {
    flex-basis: 100%;
    color: #777;
}

演示 [ ^ ]



编辑：已更新，因此列表仅在至少500px宽的屏幕上分成两列。

Demo[^]

Updated so that the list only splits into two columns on screens that are at least 500px wide.

这篇关于如何在HTML / CSS中创建这样的表？ [附图]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！