html - 仅使用 CSS 的 HTML 表格的每一行的圆角?
问题描述
我正在尝试设置一个简单的 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;
}
推荐阅读
- python - Google Admin SDK 延迟
- firebase - Firebase 托管重写在本地工作但不在云中工作 - 错误?
- jquery - JQuery - 调用相同的页面但使用不同的模型数据
- javascript - 在使用 Datatables (JS) 下载文件之前和之后执行代码
- arrays - 在字典中快速添加键值对
- python - Python 中的 Rostopic pub 等效项
- javascript - 如何检查一个单词是否有特定的字母表
- python - 收到 DM 后创建 Discord 频道
- r - 在数据 ggplot2 上覆盖正态密度图
- javascript - 在 Redux 连接回调中访问状态和调度