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 /列，并填充表自动给出的高度。

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

要求是它是一张流畅的桌子。它只是一个有行的表，仅此而已。它是基于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

只需将“侧边栏”设为一个行格式，其行数等于行总数。

除此之外：你会发现很多人都会流下眼泪以这种方式使用表格。我的建议是：务实。花你的时间解决实际问题，而不是用语义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>

Answer 2

根据您对跨浏览器兼容性的需求，您可以使用CSS生成的内容和计数器：

td {
    font-size: 1em;
    width: 5em;
    padding: 0.5em 1em;
    border: 1px solid #ccc;
    margin: 0 auto;
}

table {
    counter-reset: tableRowNum;
}

tbody tr {
    counter-increment: tableRowNum;
}

tbody tr:before {
    font-size: 1em;
    content: counter(tableRowNum, lower-alpha);
    display: block;
    padding: 0.5em;
    position: relative;
    top: 1px;
    border-bottom: 1px solid #ccc;
}

JS Fiddle demo

这当然是IE＆lt; 8或9，可能会挣扎或无法呈现增量。如果您不想将增量值硬编码到表中，可能需要使用JavaScript来添加“数字”。

简单的JavaScript解决方案（虽然这假设已经添加到每一行的空td元素并且仅存在以防止必须对递增的数字进行硬编码）：

var rows = document.getElementsByTagName('tr');

for (i=0; i<rows.length; i++){
    rows[i].firstElementChild.innerHTML = i; // zero-based counting.
}

JS Fiddle demo

Answer 3

您可能需要一个列表，因为您正在使用递增值..所以：

<ul>
    <li>
        <ul>
            <li>stuff</li>
            <li>more stuff</li>
        </ul>
     </li>
</ul>

等

主列表可以使用css值list-style按字母顺序递增，并且secundairy列表可以通过使用css属性显示内联显示。但是在语义上你应该使用表来表示数据..只需添加一列到因为增量有点像每条记录的主键吗？

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

3 个答案: