[英]Rounded corners for each row of an HTML table using only CSS?
我正在嘗試設置一個簡單的 HTML 表格的樣式,以在每行和每行的圓角之間留出空間,如下所示:
我是前端開發的新手,所以我只想使用 CSS 和 HTML 來掌握一些東西。 到目前為止,我一直無法在每一行上獲得圓角。 我曾嘗試將border-radius
添加到table
和tr
元素,但沒有成功。 將屬性添加到td
元素以某種方式起作用,但當然我在每個項目上得到圓邊,而不是每一行。
我還需要在文本周圍的每一行內添加填充,這也還沒有完全奏效,但圓角邊緣是我目前更關心的問題。
這是我的代碼。 注意我使用的是 Jinja 模板引擎,這是數據到達那里的方式。
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;
}
將您的 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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.