Warul Kawa
Warul Kawa

Reputation: 11

Trying to format this table list in HTML/CSS

I'm trying to format what might actually be a pretty simple list, but I'm struggling to get the cells logic right, given that I would need a continuous line running from the end of the item name to the price.

THIS

is what it should look like. Appreciate any help!

            <div class="text-list">
                <table>
                    <tr>
                        <td class="left">1.</td>
                        <td class="center">First Item</td>
                        <td class="right">€10,00</td>
                    </tr>
                    <tr>
                        <td class="left"></td>
                        <td class="center">Lorem ipsum dolor sit amet, consectetur adipiscing eiusmod tempor incididunt ut labore.</td>
                    </tr>
                </table>
            </div>


            table {
                width: 100%
            }

            td {
                font-size: 16px;
                line-height: 17px;
            }       

                .left {
                    width: 10%;
                    text-align: left;
                }

                .center {
                    width: 80%;
                    text-align: left;
                }

                .right {
                    width: 10%;
                    margin-right: 1px;
                    text-align: right;
                }

Upvotes: 1

Views: 257

Answers (1)

Johannes
Johannes

Reputation: 67778

With tables that's going to be quite difficult, but if you can change the HTML structure, you can do it as I desribed here: https://stackoverflow.com/a/41905228/5641669

Upvotes: 1

Related Questions