1

コンテンツに応じて列のサイズを調整する動的テーブルを作成できます<ul>。<li>

しかし、問題は、ネストされたテーブルを行内に追加すると、このネストされたテーブルが行の下部ではなく右側に表示されることです。

これは構造です：

<li>
  <div></div>
  <div></div>
  <div></div>
  <ul>
     <li>
       <div></div>
       <div></div>
       <div></div>
     </li>
  </ul>
</li>

完全な HTML および CSS コードは次のとおりです。

http://jsfiddle.net/F9mXv/25/

ネストされたテーブルを行の下に配置するにはどうすればよいですか?

ありがとう！！！

4

2 に答える 2

1

新しい UL を div のどこかにラップする必要があります

    <li>
       <div class="div-cb">
            <input type="checkbox" value="on" />
        </div>

        <div>
            <ul class=" query_list_table sub_list_table">
                    <li class="header">
                        <div>AAAAA</div>
                        <div>BBBB</div>
                        <div>CCCCCCC</div>
                        <div>DDDD</div>
                    </li>

                    <li>
                        <div>XXXXXXXX</div>
                        <div>YYYYYYYYYY</div>
                        <div>ZZZZZZZZZZZZZZZZZZ</div>
                        <div>WW</div>
                    </li>

                     <li>
                        <div>XXXXXXXX</div>
                        <div>YYYYYYYYYY</div>
                        <div>ZZZZZZZZZZZZZZZZZZ</div>
                        <div>WW</div>
                    </li>

                     <li>
                        <div>XXXXXXXX</div>
                        <div>YYYYYYYYYY</div>
                        <div>ZZZZZZZZZZZZZZZZZZ</div>
                        <div>WW</div>
                    </li>
                 </ul>
        </div>
    </li>

http://jsfiddle.net/F9mXv/26/

どうすればよいかわからないことの1つは、これで「colspan」の動作を複製することです。ご覧のとおり、最初のセルにあり、幅を広げています。

于 2014-08-29T15:07:21.780 に答える
1

ネストされたテーブルに独自の行を与えるだけで、ネストされたテーブルを下に移動できます。これを一連の<li> </li>タグで囲むと、前の行の下になります: JSFiddle

于 2014-08-29T15:12:26.023 に答える