html - 如何使嵌套列表看起来像带有折叠边框的表格？

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

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

我选择在标记中使用列表，因为这些信息是如何关联的。但是，必须进行布局以使其看起来像表格以便打印。我使用flexbox使它看起来像这样，唯一的事情是我无法使边框折叠。我不能使用表，因为响应版本的确像列表一样布置信息，而表破坏了信息的语义结构。所以问题是：

如何使它看起来像桌子（带有折叠的边框）？还是对此有更好的解决方案？

标记的外观如下：

<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;
}

Here's the jsfiddle。不要介意活动级别的布局。

最佳答案

做完了我发现没有一个简单的方法来执行此操作，相反，解决方案是摆弄每个元素的边框规则，并更改标记上的几处内容，例如将“标头”用跨距和块显示包围。这是最终的标记：

<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;
}

Here's the final jsfiddle。

关于html - 如何使嵌套列表看起来像带有折叠边框的表格？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34887854/