如何使嵌套列表看起来像具有折叠边框的表格

Question

我有一些具有以下语义结构的信息：

Company
    Project 1
        Monday
            Activity 1
            Activity 2
        Tuesday
            Activity 3
        ...
    Project 2
        Day of the week
            Activity 1...n
Company 2
    ...

我选择在标记中使用列表，因为信息是如何相关的。但是，它必须布局得像一张桌子，以便进行打印。我使用弹性框使它看起来像这样，唯一的问题是我不能使边框折叠。我不能使用表格，因为响应式版本确实像列表一样布置信息，而表格会破坏信息的语义结构。所以问题是：

如何使它看起来像一个表格（带有折叠的边框）？还是有更好的解决方案？

这是标记的外观：

<ul class="container">
  <li class="company-item">
    Company
    <ul class="projects-container">
      <li class="project-item">
        Project 1
        <ul class="days-container">
          <li class="day-item">Monday
            <ul class="activities-container">
              <li class="activity-item">Activities</li>
              <li class="activity-item">Activities</li>
            </ul>
          </li>
          <li class="day-item">Saturday
            <ul class="activities-container">
              <li class="activity-item">Activities</li>
              <li class="activity-item">Activities</li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="project-item">
        Project 2
        <ul class="days-container">
          <li class="day-item">Monday
            <ul class="activities-container">
              <li class="activity-item">Activities</li>
              <li class="activity-item">Activities</li>
            </ul>
          </li>
          <li class="day-item">Saturday
            <ul class="activities-container">
              <li class="activity-item">Activities</li>
              <li class="activity-item">Activities</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

我用来像桌子一样布置它的 CSS 规则：

/* resest for this example */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* using flex */
.container {
  display: flex;
  flex-direction: column;
}
.projects-container {
  display: flex;
  flex-direction: column;
}
.days-container {
  display: flex;
  flex-direction: row;
}
.activities-container {
  display: flex;
  flex-direction: column;
}
.project-item {
  flex-grow: 1;
}
.day-item {
  flex-grow: 1;
}
.activity-item {
  padding: 10pt;
}
li {
  border: 1px solid silver;
  text-align: center;
}

这是jsfiddle。不要介意活动级别的布局。

Answer 1

完成。我发现没有一个简单的方法可以做到这一点，相反，解决方案是摆弄每个元素的边框规则并更改标记上的一些内容，例如用跨度将"标题"与块显示包围起来。下面是最终标记：

<ul id="container">
  <li class="company-item">
    <span class="company-title">Company</span>
    <ul class="projects-container">
      <li class="project-item">
        <span class="project-title">Project 1</span>
        <ul class="days-container">
          <li class="day-item">
            <span class="day-title">Monday</span>
            <ul class="activities-container">
              <li class="activity-item">Activities</li>
              <li class="activity-item">Activities</li>
            </ul>
          </li>
          <li class="day-item">
            <span class="day-title">Saturday</span>
            <ul class="activities-container">
              <li class="activity-item">Activities</li>
              <li class="activity-item">Activities</li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="project-item">
        <span class="project-title">Project 2</span>
        <ul class="days-container">
          <li class="day-item">
            <span class="day-title">Monday</span>
            <ul class="activities-container">
              <li class="activity-item">Activities</li>
              <li class="activity-item">Activities</li>
            </ul>
          </li>
          <li class="day-item">
            <span class="day-title">Saturday</span>
            <ul class="activities-container">
              <li class="activity-item">Activities</li>
              <li class="activity-item">Activities</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

这是最终的 CSS：

/* resest for this example */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  text-align: center;
  border-style: solid;
  border-color: grey;
  border-width: 0;
}
span {
  border-style: solid;
  border-color: grey;
}

/* using flex */
#container {
  display: flex;
  flex-direction: column;
  border-width: 0 0 1pt 0;
}
.company-item {
  border-width: 1pt 0 1pt 1pt;
}
.company-title {
  display: block;
  border-width: 0 1pt 0 0;
}
.projects-container {
  display: flex;
  flex-direction: column;
}
.project-item {
  flex-grow: 1;
  border-width: 1pt 0 0 0;
}
.project-title {
  display: block;
  border-width: 0 1pt 0 0;
}
.days-container {
  display: flex;
  flex-direction: row;
}
.day-item {
  flex-grow: 1;
  border-width: 1pt 1pt 0 0;
}
.day-title {
  display: block;
  border-width: 0 0 1pt 0;
}
.activities-container {
  display: flex;
  flex-direction: column;
}
.activity-item {
  padding: 10pt;
}
.activity-item:not(:last-child) {
  border-width: 0 0 1pt 0;
}

这是最后的jsfiddle。