オフセット内に2つのテーブルを並んで表示する

私はお互いの下にある2つのテーブルを持っています。オフセット内に2つのテーブルを並んで表示する

第2のテーブルは、第1のテーブルの要約であり、第1のテーブルよりも少ない列を有する。だから私はオフセットで2番目のテーブルを表示したい。これで、2番目のテーブルにはわずかなオフセットがあるため、互いにインラインで表示されません。

スニペットをフルスクリーンで開くと、その例が表示されます。

どのようにすれば、両方のテーブルがスムーズに表示されるように修正できますか？

詳細を確認するためのスクリーンショットです。

私はそれらの2行は同じ幅に開始することを望みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div class="wrapper"> 
 
     <div class="page-wrapper"> 
 
      <div class="row"> 
 
       <div class="col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="table-responsive"> 
 
         <table class="table table-condensed table-bordered small"> 
 
          <thead> 
 
           <tr> 
 
            <th class="col-sm-3">One</th> 
 
            <th class="col-sm-3">Two</th> 
 
            <th class="col-sm-2">Three</th> 
 
            <th class="col-sm-2 text-right"># Number</th> 
 
            <th class="col-sm-2 text-right">&sum; Money</th> 
 
           </tr> 
 
          </thead> 
 
          <tbody> 
 
           <tr> 
 
            <td>Name</td> 
 
            <td>Two</td> 
 
            <td>Lorem Ipsum</td> 
 
            <td>123</td> 
 
            <td>154 €</td> 
 
           </tr> 
 
          </tbody> 
 
         </table> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="col-sm-3"> 
 
        HELLO WORLD 
 
       </div> 
 
       <div class="col-sm-9"> 
 
        <div class="table-responsive"> 
 
         <table class="table table-condensed table-bordered small"> 
 
          <thead> 
 
           <tr> 
 
            <th class="col-sm-5">One Big Name</th> 
 
            <th class="col-sm-2 text-right"># Number</th> 
 
            <th class="col-sm-2 text-right">&sum; Money</th> 
 
           </tr> 
 
          </thead> 
 
          <tbody> 
 
           <tr> 
 
            <td>Name</td> 
 
            <td>123</td> 
 
            <td>154 €</td> 
 
           </tr> 
 
          </tbody> 
 
         </table> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

出典

2016-07-12 KhorneHoly

-1

私はあなたが正確に何をしたい、非常にわからないんだけど、あなたがしたい場合は、2番目の行がオフセットしているために、あなたは次のように行うことができます：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div class="wrapper"> 
 
     <div class="page-wrapper"> 
 
      <div class="row"> 
 
       <div class="col-sm-12 col-md-12 col-lg-12"> 
 
        <div class="table-responsive"> 
 
         <table class="table table-condensed table-bordered small"> 
 
          <thead> 
 
           <tr> 
 
            <th class="col-sm-3">One</th> 
 
            <th class="col-sm-3">Two</th> 
 
            <th class="col-sm-2">Three</th> 
 
            <th class="col-sm-2 text-right"># Number</th> 
 
            <th class="col-sm-2 text-right">&sum; Money</th> 
 
           </tr> 
 
          </thead> 
 
          <tbody> 
 
           <tr> 
 
            <td>Name</td> 
 
            <td>Two</td> 
 
            <td>Lorem Ipsum</td> 
 
            <td>123</td> 
 
            <td>154 €</td> 
 
           </tr> 
 
          </tbody> 
 
         </table> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="col-sm-9 col-md-offset-3"> 
 
        <div class="table-responsive"> 
 
         <table class="table table-condensed table-bordered small"> 
 
          <thead> 
 
           <tr> 
 
            <th class="col-sm-5">One Big Name</th> 
 
            <th class="col-sm-2 text-right"># Number</th> 
 
            <th class="col-sm-2 text-right">&sum; Money</th> 
 
           </tr> 
 
          </thead> 
 
          <tbody> 
 
           <tr> 
 
            <td>Name</td> 
 
            <td>123</td> 
 
            <td>154 €</td> 
 
           </tr> 
 
          </tbody> 
 
         </table> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

出典

2016-07-12 11:58:34 RasmusGlenvig

ブレークポイントの2番目のテーブルコンテナ "col-sm-9"の左パディングを調整する必要があります12列のグリッドレイアウトが設定されているとき...

実際には、列の合計が30px、テーブルセルが24pxの溝があります。これは一致しないためミスアライメントにつながります。これは何らかの形で修正する必要があります。ソリューションは、どちらかあなたのテーブル内の1つまたは他の...

出典

2016-07-12 12:02:45 Kjell

。 – KhorneHoly

Mr Kjellが正しくありました –

を調整するあなたは幅

class="col-sm-5" 
class="col-sm-2" 
class="col-sm-2"

を持つ3つの列を持っているが、これらは「COL-SM-のクラスを持つdivの内側にあります9 'が関連付けられているので、divの' col-sm-9 'の下の幅の3/4で占めるスペースの9/12になります。

3/4のパーセンテージとして新しい値がどのようなものか分かりますが、これらはcol-sm-？の正確な値ではありません。 5はcol-sm-6.666666666になる必要があり、2はどちらも存在しないcol-sm-2.666666666になる必要があります。あなたが得ることができる最も近いのはcol-sm-6とcol-sm-3です。これは上記の表と揃っていませんが、あなたよりも優れています。

列を非常に密接に（完全ではないが）整列させたい場合は、DIVSを使用して小数点以下の桁までパーセンテージを計算する必要があります。フレックスボックスレイアウトを使用することもできます（ただし、小数点の丸めは特にサイズ変更の際に違いが生じます）。

または2組の列に「既知の」固定幅を使用し、各列のコンテンツのオーバーフローを「インテリジェントに」処理します。

オプションだろう、多分そうするよりきれいな方法があります

かではなく、背景に見えるようにテーブルやスタイルでダミーの列を使用して...

出典

2016-07-12 12:05:39

私の質問を編集して、さらに質問を明確にしました – KhorneHoly

オフセット内に2つのテーブルを並んで表示する

答えて

関連する問題