3

我想要一个看起来像这样的 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...

有小费吗？

4

2 回答 2

4

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

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

于 2012-12-03T17:25:34.853 回答
0

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

它与问题中的解释不完全一样（虽然很接近），但解决了我遇到的指定问题。

于 2012-12-04T15:25:00.850 回答