为什么没有边界折叠的边界底部不能与 tr 一起使用？

【问题标题】：Why border-bottom does not work with tr without border-collapse?为什么没有边界折叠的边界底部不能与 tr 一起使用？
【发布时间】：2020-07-15 19:43:23
【问题描述】：

我只是在StackOverflow中看到了用tr设置border-bottom的解决方案，但我不明白为什么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 &amp; 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 &amp; 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>

【问题讨论】：

  • @ByrisettiHemanth 你去吧。
  • 我只想解释为什么当边框折叠被扔掉时，单元格边框被某些东西隐藏了，但它出现在 CSS 框源代码中。
  • 规范要求在separated borders model 中忽略行的边界（连同列、行组和列组）。它没有解释为什么它是必要的。
  • 有道理，但声明边框折叠，行与边框一起出现，所以存在"User-Agent must ignore"的例外？
  • 不，collapsing border model 的规则完全不同。

标签： html css html-table tr


【解决方案1】：

如果您希望您的单元格有边框，您应该为它们设置边框或边框底部，然后为折叠，边框折叠 = 折叠。你也可以像这样为你的 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 &amp; 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 &amp; 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>

【讨论】：

    猜你喜欢
    • 2017-02-17
    • 1970-01-01
    • 1970-01-01
    • 2023-04-07
    • 2011-10-21
    • 1970-01-01
    • 2018-03-04
    • 2019-05-11
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode