Click here to Skip to main content
13,665,664 members
Rate this:
 
Please Sign up or sign in to vote.
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.
Posted 14-Jun-18 7:35am
Updated 14-Jun-18 9:12am
v2

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

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">Description…</span>
    </li>
    <li>
        <span class="title">Title</span>
        <span class="spacer"></span>
        <span class="price">$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;
}

Demo[^]

EDIT: Updated so that the list only splits into two columns on screens that are at least 500px wide.
  Permalink  
v2
Comments
shivam gohel 15-Jun-18 14:09pm
   
Thanks a lot man!! I guess i have to ask you every question related to CSS stuff!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web01-2016 | 2.8.180810.1 | Last Updated 14 Jun 2018
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100