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/ アイデアは、最初の行がテーブル全体にまたがるということです。2番目の行には単一のテーブルセルがあり、残りの行はテーブル全体にまたがっています。

行を増やすには、テーブルに列を増やす必要がありますが、これは大まかなアイデアです。

最後に、インデントを行うためのより良い方法は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 に答える