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

首先，这是对表格的严重滥用，应该真正避免。(加粗是因为我对此有强烈的感受)。 :)

其次，您遇到的问题是您需要 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>

同一 fiddle 中的示例:http://jsfiddle.net/Sd4Mx/