HTML表格，如LaTeX制表符；每行的最后一列应跨越整个表格

Question

我想要一个HTML格式的表格，看起来像这样：

C1  Some text right here
    C2  Some text here too
        C3  And maybe some text here
    C4  Basically like a text written with tabbing
C5  You get the point?

我知道我可能会在这里使用列表，但我希望列(除了每行的最后一列)具有固定的宽度。在LaTeX中，这是可行的：

\newenvironment{mytable}
{\begin{tabbing}
xxxxxxxxx\=xxxxxxxxx\=xxxxxxxxx\=xxxxxxxxx\=xxxxxxxxx\=xxxxxxxxx\=\kill}
{\end{tabbing} }%

mytable{
C1 \> Some text right here \+\\
  C2 \> Some text here too \+\\
    C3 \> And maybe some text here \-\\
  C4 \> Basically like a text written with tabbing \-\\
C5 \> You get the point?
}

我尝试在HTML/CSS中执行此操作，但结果如下所示：

C1  Some text right here
                          C2  Some text here too
                                                  C3  etc...

有什么建议吗？

Answer 1

我尝试了这个解决方案，看起来很管用。下面是CSS：

div.start
{
    display: inline-block;
    vertical-align: top;
    width: 60px;
}
ul.tabbing
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.tabbing li ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-left: 60px;
}

下面是HTML：

<ul class="tabbing">
  <li><div class="start">C1</div>Some text right here
  <ul>
    <li><div class="start">C2</div>Some text here too
    <ul>
      <li><div class="start">C3</div>And maybe some text here</li>
    </ul></li>
    <li><div class="start">C4</div>Basically like a text written with tabbing</li>
  </ul></li>
  <li><div class="start">C5</div>You get the point?</li>
</ul>

它并不完全像问题中解释的那样(虽然很接近)，但解决了我遇到的特定问题。

Answer 2

首先，这是对表的一种非常糟糕的滥用，应该避免。(粗体，因为我对此有强烈的感受)。:)

其次，你遇到的问题是，你需要使用colspanning来正确地完成它。您实际上没有展示您所使用的html，但是这个示例看起来只是将空的表格单元格放在前面，但是由于表格的工作方式，这意味着下一个单元格是在第一个单元格中所有内容的结尾之后开始的。

因此，这样做的方法是像这样构造您的表：

<table>
<tr><td colspan="3">First line</td></tr>
<tr><td></td><td colspan="2">second line</td></tr>
<tr><td></td><td></td><td>third line</td></tr>
</table>

有一些样式的例子：http://jsfiddle.net/Sd4Mx/想法是第一行横跨整个表格。第二行只有一个表格单元格，然后该行的其余部分跨越整个表格，依此类推。

对于更多的行，表中需要更多的列，但这只是一个粗略的想法。

最后，更好的缩进方式是只使用带边距的div元素。

<style>
div.indent
{
    margin-left: 50px;
}
</style>

<div>
First line
    <div class="indent">Second line
        <div class="indent">Third line</div>
    </div>
</div>

同样的例子：http://jsfiddle.net/Sd4Mx/