1

こんにちは皆さん、2 列のレイアウトが必要ですが、コンテンツを積み重ねる必要があります。ここにフィドルhttp://jsfiddle.net/kljuco/KPMCJ/があります。

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<div class="row">
    <div class="span6">
        <table class="table">
            <tr><th colspan="2">Test 1</th></tr>
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
    </div>
    <div class="span6">
        <table class="table">
            <tr><th colspan="2">Test 2</th></tr>
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>
              <tr>
                <td>test</td>
                <td>test</td>
            </tr>
              <tr>
                <td>test</td>
                <td>test</td>
            </tr>
              <tr>
                <td>test</td>
                <td>test</td>
            </tr>
              <tr>
                <td>test</td>
                <td>test</td>
            </tr>
              <tr>
                <td>test</td>
                <td>test</td>
            </tr>
              <tr>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
    </div>
</div>
<div class="row">
    <div class="span6">
         <table class="table">
             <tr><th colspan="2">Test 3</th></tr>
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>
             <tr>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
    </div>
    <div class="span6">
          <table class="table">
              <tr><th colspan="2">Test 4</th></tr>
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>
             <tr>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
    </div>
</div><div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
</div><div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
</div>

「テスト 1」テーブルのすぐ下に「テスト 3」テーブルが必要です。thnx

4

3 に答える 3

0

また、別の方法：http: //jsfiddle.net/persianturtle/KPMCJ/3/

悪いニュースは、2番目のテーブルのhtmlを複製する必要があったことです。

良いニュースです。jQueryはありません。

見てください。

@media (max-width: 767px) {

  #second {
      display:none;
  }

#second-small {
      display:table;
  }


}


@media (min-width: 766px) {

  #second-small {
      display:none;
  }


}
于 2013-02-12T14:29:36.423 に答える
0

このように行をネストできます...

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<div class="row">
    <div class="span6">
        <table class="table">
            <tr><th colspan="2">Test 1</th></tr>
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <div class="row">
            <div class="span6">
                <table class="table">
                    <tr><th colspan="2">Test 3</th></tr>
                    <tr>
                          <td>test</td>
                          <td>test</td>
                    </tr>
                    <tr>
                          <td>test</td>
                          <td>test</td>
                    </tr>
                    <tr>
                          <td>test</td>
                          <td>test</td>
                    </tr>
                </table>
             </div>
        </div>
    </div>
    <div class="span6">
        <table class="table">
            <tr><th colspan="2">Test 2</th></tr>
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>
              <tr>
                <td>test</td>
                <td>test</td>
            </tr>
              <tr>
                <td>test</td>
                <td>test</td>
            </tr>
              <tr>
                <td>test</td>
                <td>test</td>
            </tr>
              <tr>
                <td>test</td>
                <td>test</td>
            </tr>
              <tr>
                <td>test</td>
                <td>test</td>
            </tr>
              <tr>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <div class="row">
            <div class="span6">
                 <table class="table">
                     <tr><th colspan="2">Test 4</th></tr>
                     <tr>
                          <td>test</td>
                          <td>test</td>
                     </tr>
                     <tr>
                          <td>test</td>
                          <td>test</td>
                     </tr>
                     <tr>
                          <td>test</td>
                          <td>test</td>
                     </tr>
                 </table>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
</div><div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
</div>

少なくとも、これから微調整を開始して、必要な結果を得ることができます

于 2013-02-12T14:13:58.850 に答える
0

これは CSS がすべきことではなく、jQuery に問題を解決させます。

<table id="first" class="table"> ....
<table id="second" class="table"> ...
<table id="third" class="table"> ...

$('#third').insertBefore('#second');
于 2013-02-12T14:15:23.283 に答える