Rounded corners for each row of an HTML table using only CSS?

Question

I am trying to style a simple HTML table to have space between each row and rounded corners on each row, like such:

This is what I currently have:

I'm new to frontend development, so I wanted to use just CSS and HTML to get a hang of things. I have so far been unable to get rounded corners on each row. I have tried adding border-radius to the table and tr elements without success. Adding the attribute to the td element somehow works, but of course I get rounded edges on each item, not each row.

I will also need to add padding within each row around the text, which hasn't quite worked yet either, but the rounded edges are my bigger concern at the moment.

Here's my code. Note I am using the Jinja templating engine, which is how the data is getting there.

HTML:

<head>
 <! HEADER CODE/>
  <link rel="stylesheet" href="static/css/results.css">


</head>

<body>
  <main>

    <h1> Stores In Your Area</h1>
    <table class="results">

      {% for row in table %}

        <tr class="spaceunder">
            {% for item in row[:-1] %}
            <td>
                {{ item }}
            </td>
            {% endfor %}

            <td>
                {{ row[-1] }} mi.
            </td>
        </tr>

      {% endfor %}

    </table>

  </main>

</body>
</html>

CSS:

body {
    background-color: #FFCBAA;
    font-family: "Helvetica Neue";
}

h1 {
    font-size: 2em;

}

table {
    border-collapse: separate;
    border-spacing: 0 0.5em;

}

tr {
    background-color: rgba(255, 238, 227, .93);
    font-size: 1.2em;
    border-radius:10px;
}

Answer 1

Change your css to:

body {
    background-color: #FFCBAA;
    font-family: "Helvetica Neue";
}

h1 {
    font-size: 2em;

}

table {
    border-collapse: separate;
    border-spacing: 0 0.5em;

}

tr {
    font-size: 1.2em;
}

tr td {
  padding: 15px 20px;
  background-color: rgba(255, 238, 227, .93);
}

tr td:first-of-type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

tr td:last-of-type {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

Rounded corners for each row of an HTML table using only CSS?

Question

1 answers

solution1
5 ACCPTED 2019-12-18 03:06:20

Rounded corners for each row of an HTML table using only CSS?

Question

1 answers

solution1 5 ACCPTED 2019-12-18 03:06:20

solution1
5 ACCPTED 2019-12-18 03:06:20