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

Techuila · Accepted Answer · 2019-12-18 03:06:20Z

6

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

answered Dec 18, 2019 at 3:06

Techuila

1,2978 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Toby Manders Over a year ago

Beautiful, thank you! I'll keep first-of-type handy from now on.

Techuila Over a year ago

Glad I could help

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related