shivam gohel Ответов: 1

Как сделать такую таблицу в HTML/CSS? [Изображение прилагается]

Итак, я хочу сделать горизонтальную линию упомянутой на изображении. как и каждый Колум такой матч, это соответствующий Колум с пунктирной линией.

Пожалуйста, смотрите изображение для получения дополнительной информации.


Мне нужна точная копия таблицы цен в html/css.

Вот ссылка на изображение : http://fs1.directupload.net/images/180614/sbnttx6h.png

Что я уже пробовал:

Я попытался создать таблицу. затем подряд сделать два coloum. один для записи данных, а другой для
метка. Но это только заполнение половины части.

1 Ответов

Рейтинг:
4

Richard Deeming

Что-то вроде этого:

<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;
}

Демонстрация[^]

РЕДАКТИРОВАТЬ: Обновлено так, что список разбивается только на два столбца на экранах шириной не менее 500 пикселей.

shivam gohel

Большое спасибо, чувак!! Я думаю, что должен задать вам все вопросы, связанные с CSS-вещами!