Question

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

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

由于信息的相关性，我选择在标记中使用列表。但是，它必须被布置成看起来像用于打印目的的桌子。我使用flexboxes使它看起来像这样，唯一的问题是我无法使边框崩溃。我无法使用表格，因为响应式版本确实将信息排列成列表，而表格则打破了信息的语义结构。所以问题是：

如何让它看起来像一张桌子（边框折叠）？或者有更好的解决方案吗？

标记的外观如下：

<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。不要介意活动层面的布局。

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

Here's the final jsfiddle

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

1 个答案: