html - 为什么没有边框折叠的边框底部不适用于 tr？
问题描述
我只是在 StackOverflow 中看到了用 tr 设置边框底部的解决方案，但我不明白为什么 CSS 会自动隐藏单元格边框。
我尝试在没有边框折叠的情况下将边框应用于单元格，我可以在 CSS 框源代码中看到它有一个边框，但在网页上就像被什么东西隐藏了一样，那是什么？为什么会这样？
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.table-head {
background: white;
font-family: Lato;
font-weight: 700;
color: red;
}
td {
font-family: Lato;
font-weight: 400;
font-size: 15px;
color: #808080;
line-height: 1.4;
}
tr {
border-bottom: 1px solid #f2f2f2;
}
table {
border-collapse: collapse;
margin: 0 auto;
background: white;
border-radius: 1px;
box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, .8);
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/table.css">
</head>
<body>
<table>
<tr class="table-head">
<th>Class Name</th>
<th>Type</th>
<th>Hours</th>
<th>Trainer</th>
<th>Spots</th>
</tr>
<tr>
<td>Like a butterfly</td>
<td>Boxing</td>
<td>9:00 AM - 11:00 AM</td>
<td>Aaron Chapman</td>
<td>10</td>
</tr>
<tr>
<td>Mind & Body</td>
<td>Yoga</td>
<td>8:00 AM - 9:00 AM</td>
<td>Adam Stewart</td>
<td>15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Wheel Pose Full Posture</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">7:00 AM - 8:30 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Playful Dancer's Flow</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Zumba Dance</td>
<td class="cell100 column2">Dance</td>
<td class="cell100 column3">5:00 PM - 7:00 PM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">20</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Cardio Blast</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">5:00 PM - 7:00 PM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Pilates Reformer</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Supple Spine and Shoulders</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">6:30 AM - 8:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Yoga for Divas</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">9:00 AM - 11:00 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">20</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Virtual Cycle</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">20</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Like a butterfly</td>
<td class="cell100 column2">Boxing</td>
<td class="cell100 column3">9:00 AM - 11:00 AM</td>
<td class="cell100 column4">Aaron Chapman</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Mind & Body</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Adam Stewart</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Crit Cardio</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">9:00 AM - 10:00 AM</td>
<td class="cell100 column4">Aaron Chapman</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Wheel Pose Full Posture</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">7:00 AM - 8:30 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Playful Dancer's Flow</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Zumba Dance</td>
<td class="cell100 column2">Dance</td>
<td class="cell100 column3">5:00 PM - 7:00 PM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">20</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Cardio Blast</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">5:00 PM - 7:00 PM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Pilates Reformer</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Supple Spine and Shoulders</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">6:30 AM - 8:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Yoga for Divas</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">9:00 AM - 11:00 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">20</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Virtual Cycle</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">20</td>
</tr>
</table>
</body>
</html>解决方案
如果您希望您的单元格有边框，您应该为它们设置边框或边框底部，然后为折叠，边框折叠 = 折叠。你也可以像这样为你的 tr 和 table 设置边框。
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.table-head {
background: white;
font-family: Lato;
font-weight: 700;
color: red;
}
td {
font-family: Lato;
font-weight: 400;
font-size: 15px;
color: #808080;
line-height: 1.4;
border: 1px solid red;
}
tr {
border-bottom: 1px solid #f2f2f2;
}
table {
border-collapse: collapse;
margin: 0 auto;
background: white;
border-radius: 1px;
box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, .8);
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<table>
<tr class="table-head">
<th>Class Name</th>
<th>Type</th>
<th>Hours</th>
<th>Trainer</th>
<th>Spots</th>
</tr>
<tr>
<td>Like a butterfly</td>
<td>Boxing</td>
<td>9:00 AM - 11:00 AM</td>
<td>Aaron Chapman</td>
<td>10</td>
</tr>
<tr>
<td>Mind & Body</td>
<td>Yoga</td>
<td>8:00 AM - 9:00 AM</td>
<td>Adam Stewart</td>
<td>15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Wheel Pose Full Posture</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">7:00 AM - 8:30 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Playful Dancer's Flow</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Zumba Dance</td>
<td class="cell100 column2">Dance</td>
<td class="cell100 column3">5:00 PM - 7:00 PM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">20</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Cardio Blast</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">5:00 PM - 7:00 PM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Pilates Reformer</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Supple Spine and Shoulders</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">6:30 AM - 8:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Yoga for Divas</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">9:00 AM - 11:00 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">20</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Virtual Cycle</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">20</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Like a butterfly</td>
<td class="cell100 column2">Boxing</td>
<td class="cell100 column3">9:00 AM - 11:00 AM</td>
<td class="cell100 column4">Aaron Chapman</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Mind & Body</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Adam Stewart</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Crit Cardio</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">9:00 AM - 10:00 AM</td>
<td class="cell100 column4">Aaron Chapman</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Wheel Pose Full Posture</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">7:00 AM - 8:30 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Playful Dancer's Flow</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Zumba Dance</td>
<td class="cell100 column2">Dance</td>
<td class="cell100 column3">5:00 PM - 7:00 PM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">20</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Cardio Blast</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">5:00 PM - 7:00 PM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Pilates Reformer</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Supple Spine and Shoulders</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">6:30 AM - 8:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Yoga for Divas</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">9:00 AM - 11:00 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">20</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Virtual Cycle</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">20</td>
</tr>
</table>
</body>
</html>推荐阅读
- onedrive - 通过 onedrive API 获取嵌入 URL
- python - 如何使用 pandas 编辑 XLSX 电子表格
- javascript - 使用 vanilla javascript 隐藏包含某些文本的标签
- java - SpringData MongoDB Repositories 查询嵌套对象中的多个字段
- java - 如何使我的过滤器模式更通用
- jspm - 为什么 JSPM 不捆绑捆绑模块的依赖关系？
- excel - 在没有VBA的情况下更新excel中的动态下拉列表
- unity3d - Unity2D 中的照明在手机上看起来与在编辑器中不同
- dataset - 使用带有多个 aeneas 文本文件的 Aeneas 强制对齐
- php - 无法使用 Codeigniter 更新我的数据库