仅使用 CSS 的 HTML 表格每一行的圆角？

Question

I am trying to style a simple HTML table to have space between each row and rounded corners on each row, like such:我正在尝试设置一个简单的 HTML 表格的样式，以在每行和每行的圆角之间留出空间，如下所示：

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.我是前端开发的新手，所以我只想使用 CSS 和 HTML 来掌握一些东西。 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.我曾尝试将border-radius添加到table和tr元素，但没有成功。 Adding the attribute to the td element somehow works, but of course I get rounded edges on each item, not each row.将属性添加到td元素以某种方式起作用，但当然我在每个项目上得到圆边，而不是每一行。

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.注意我使用的是 Jinja 模板引擎，这是数据到达那里的方式。

HTML: 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: 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:将您的 css 更改为：

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

仅使用 CSS 的 HTML 表格每一行的圆角？

问题描述

1 个解决方案

解决方案1
5 已采纳 2019-12-18 03:06:20

仅使用 CSS 的 HTML 表格每一行的圆角？

问题描述

1 个解决方案

解决方案1 5 已采纳 2019-12-18 03:06:20

解决方案1
5 已采纳 2019-12-18 03:06:20