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

我想要一个 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...

有小费吗？

最佳答案

首先，这是对表格的非常糟糕的滥用，应该真正避免。 (加粗是因为我对此非常强烈)。 :)

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

关于HTML 表格，如 LaTeX 制表符；每行的最后一列应跨越整个表格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13688409/