CODEWITHSUNDEEP
htmlcsshtml-table
Toby Manders
Toby Manders

Reputation: 47

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

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

This is what I currently have: enter image description here

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

Upvotes: 0

Views: 1997

Answers (1)

Techuila
Techuila

Reputation: 1287

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

Upvotes: 5

Related Questions