Question

我有一个使用JS组件呈现的列表，其结构不允许灵活性。另一方面，我可以根据自己的喜好调整CSS。

这是我到目前为止所拥有的：

ul,
table {
  display: table;
  border-spacing: 10px;
  margin: 0;
  padding: 0;
}
li,
tr {
  display: table-row;
  background-color: #f0f0f0;
}
li > div,
td {
  display: table-cell;
  padding: 5px;
}
.right {
  padding-left: 60px;
  text-align: right;
}

<!-- My structure -->

<ul>
  <li>
    <div class="right">Cell 1.1</div>
    <div>Cell 1.2</div>
    <div>
      <ul>
        <li>Nested cell 1</li>
        <li>Nested cell 2</li>
      </ul>
    </div>
  </li>
  <li>
    <div class="right">Cell 2.1</div>
  </li>
</ul>

<hr>

<!-- Ideal representation -->

<table>
  <tr>
    <td class="right">Cell 1.1</td>
    <td>Cell 1.2</td>
  </tr>
  <tr>
    <td colspan="2">
      <table>
        <tr>
          <td>Nested cell 1</td>
          <td>Nested cell 2</td>
          <tr>
      </table>
    </td>
    </tr>
    <tr>
      <td class="right">Cell 2.1</td>
    </tr>
</table>

对于喜欢它的人来说，这是一个JSFiddle。

我需要两件事，基本上是：

使第一列的宽度（“Cell 1.1”，“Cell 2.1”等）自动调整并增长以适应任何行的最宽内容（因此表格显示）
当任何项目/行中包含嵌套列表时，在全宽/全色列（即第1行和第2行之间）中显示父列表

我现在拥有的CSS是我最好的尝试。我从块布局开始，但从来没有实现适应整个列宽的流畅的第一列。我确实在片段中使用CSS实现了第一个目标，但现在我的嵌套列表显示为正常的单元格，因为它受限于列。

该片段有两种情况：最重要的一种是我目前所拥有的不完整的情景，另一种是我想要的视觉效果，但目前我不能拥有这种结构。

有没有办法在不改变HTML结构和不使用JS的情况下实现上述两个目标？

Answer 1

这可能就是你所追求的，不要指望它很漂亮，因为这是对HTML / CSS的屠杀，HTML没有改变（甚至没有添加任何类）。

https://jsfiddle.net/9hfxzjwL/5/

对于原始的css：

$t0

Answer 2

毫不奇怪，这个解决方案比我最初想要的更接近我理想的表现形式。自我注意：如果我想要表格式行为来显示表格数据，也许常规表格不是一个坏主意......

无论如何，问题产生于我使用VueJS组件，并且他们的模板中只能有一个根元素。在我看来，根元素是tr或li，因为它们代表了我的表格数据的行。这意味着我处于死胡同，因为如果使用表我需要多个tr，或者如果我在ul内嵌套li，则嵌套列表将显示在单个单元格内并且永远不能占据桌子的整个宽度。

解决方案是使用tbody作为组件的根元素。这意味着我可以尊重Vue只需要一个根元素并在其中放置许多tr的要求。在视觉上，它与具有多个tr的情况相同。 列宽也会调整为适合整行的内容，即使tr元素不是直接兄弟。它还具有有效HTML的好处。

table {
  border-spacing: 10px;
}
tr {
  background-color: #f0f0f0;
}
td {
  padding: 5px;
}
.right {
  padding-left: 60px;
  text-align: right;
}

<table>
  <tbody>
    <tr>
      <td class="right">Cell 1.1</td>
      <td>Cell 1.2</td>
    </tr>
    <tr>
      <td colspan="2">
        <table>
          <tr>
            <td>Nested cell 1</td>
            <td>Nested cell 2</td>
            <tr>
        </table>
      </td>
      </tr>
  </tbody>
  <tbody>
    <tr>
      <td class="right">Cell 2.1</td>
      <td>Cell 2.2</td>
    </tr>
  </tbody>
</table>

另一个带有表格显示的全宽嵌套列表

2 个答案: