JSFiddle - React, Tailwind, and code Playground

by cahnory

HTML

<table summary="prix des fruits en euros">
    <caption>Prix des fruits</caption>
    <tr>
        <th>Kiwi</th>
        <td>13337€</td>
    </tr>
    <tr>
        <th>Banane flambée</th>
        <td>42€</td>
    </tr>
    <tr>
        <th>Citron</th>
        <td>1€</td>
    </tr>
</table>

CSS

body {
    font-size: 150%;
    background: #bada55;
}
table {
    width: 60%;
    border-collapse: separate;
    background: beige;
}
th, td {padding: .2em;}
td { text-align: right }

/* Cap */
th, td {overflow: hidden; vertical-align: bottom}
th:after {
    content:'......................................................................';
    display: inline-block;
    left: .25em;
    position: relative;
    width: 0;
}
td:before {
    content:'......................................................................';
    direction: rtl;
    display: inline-block;
    left: -.25em;
    position: relative;
    width: 0;
}