html - 在表格数据中添加“边栏”？

这可能很容易做到，但是我什么都没想到。可以说我有一排数据看起来像这样：

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 / 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>

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

最佳答案

只需将您的“边栏”设置为一个行距等于总行数的表单元格即可。


  旁：您会发现很多人，他们流下了许多眼泪
  这样使用表格。我的建议：务实。花时间
  解决实际问题，而不是为语义HTML大惊小怪
  为了纯净。


一个例子：

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

关于html - 在表格数据中添加“边栏”？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7733146/