html - 在表格数据中添加 "sidebar"？

Question

这可能很容易做到，但我就是想不出任何东西。假设我有一行数据如下所示:

data  |  data  |  data  |  data  |  data  |
data  |  data  |  data  |  data  |  data  |
data  |  data  |  data  |  data  |  data  |
data  |  data  |  data  |  data  |  data  |

另外，我需要这个:

a    data  |  data  |  data  |  data  |  data  |
b    data  |  data  |  data  |  data  |  data  |
c    data  |  data  |  data  |  data  |  data  |
d    data  |  data  |  data  |  data  |  data  |

而“abcd”字符串是一个 div/列，并填充表格自动指定的高度。

所以基本上是行中的一列。想法？

要求是它是一个流动的 table 。它只是一个有行的表格，仅此而已。它是基于 display: table/table-row/table-header/table-cell 方法构建的。

简化的标记:

.data { 
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse
}
    .data header {
        display: table-header-group;
        height: auto;
        border-bottom: 1px solid #2B597B
    }
    .data section {
        display: table-row-group
    }
    .data article { 
        display: table-row;
        line-height: 21px;
        padding: 0 3px
    }
    .data span {
        display: table-cell;
        overflow: hidden
    }

与:

<div class="data">
<header>
    <span>one</span>
    <span>two</span>
</header>
<section>
    <article>
        <span>one</span>
        <span>two</span>
    </article>
</section>
</div>

它与增量数据无关。只是东西，它可能是一个空的空间。

Answer 1

只需将您的“侧边栏”设为行跨度等于总行数的表格单元格即可。

Aside: You'll find plenty of folks who while shed many tears over using a table this way. My advice: be pragmatic. Spend your time solving real problems rather than fussing with semantic HTML for the sake of purity.

一个例子:

<table>
  <tr>
    <td rowspan="2">the sidebar</td>
    <th>one</th>
    <th>two</th>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
</table>