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>

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

Answer 2

我尝试了这个解决方案，这似乎可以解决问题。这是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>

这不完全像问题中所解释的那样（虽然很接近），但解决了我遇到的指定问题。

HTML表格，如LaTeX tabbing;每行的最后一列应该跨越整个表

2 个答案: