2つの応答テーブルを1つの列に配置するにはどうすればよいですか？

Question

どのように応答可能なテーブルを別のテーブルの隣に置くことができますか？ 私は以下に共有するHTMLコードを使用しました。ただし、2番目のテーブルは最初のテーブルの下に配置されています。ここで

<div class="row"> 
    <div class="col-sm-6 .col-md-5 .col-lg-6"> 
     <center><h4>GÜNLÜK DEMİR FİYATLARI</h4></center> 
     <table class="table table-striped"> 
     <thead> 
      <tr> 
       <th>Bölge</th> 
       <th>Tarih</th> 
       <th>Kalın Demir</th> 
       <th>İnce Demir</th> 
      </tr> 
     </thead> 
     </table> 
     <center><h4>PİYASA FİYATLARI</h4></center> 
     <table class="table table-striped"> 
     <thead> 
      <tr> 
       <th>Döviz</th> 
       <th>Tarih</th> 
       <th>Alış</th> 
       <th>Satış</th> 
      </tr> 
     </thead> 
     </table> 
    </div> 
</div> 

Here is the screenshot of my result

link完全かつライブです。

2つの応答テーブルを1つの列に配置するにはどうすればよいですか？ col-クラスで

.table-row .row{margin:0} 

Answer 1

あなたのテーブル（およびヘッダ）をラップする必要があります。その後

<div class="table-row"> 
    <div class="row"> 
     <div class="col-sm-6 col-md-5 col-lg-6"> 
      <center><h4>GÜNLÜK DEMİR FİYATLARI</h4></center> 
      <table class="table table-striped"> 
       <thead> 
        <tr> 
        <th>Bölge</th> 
        <th>Tarih</th> 
        <th>Kalın Demir</th> 
        <th>İnce Demir</th> 
        </tr> 
       </thead> 
      </table> 

      <center><h4>PİYASA FİYATLARI</h4></center> 
      <table class="table table-striped"> 
       <thead> 
        <tr> 
        <th>Döviz</th> 
        <th>Tarih</th> 
        <th>Alış</th> 
        <th>Satış</th> 
        </tr> 
       </thead> 
      </table>   
     </div> 
     <div class="col-sm-6 col-md-5 col-lg-6"> 
      <center><h4>GÜNLÜK DEMİR FİYATLARI</h4></center> 
      <table class="table table-striped"> 
       <thead> 
        <tr> 
        <th>Bölge</th> 
        <th>Tarih</th> 
        <th>Kalın Demir</th> 
        <th>İnce Demir</th> 
        </tr> 
       </thead> 
      </table> 

      <center><h4>PİYASA FİYATLARI</h4></center> 
      <table class="table table-striped"> 
       <thead> 
        <tr> 
        <th>Döviz</th> 
        <th>Tarih</th> 
        <th>Alış</th> 
        <th>Satış</th> 
        </tr> 
       </thead> 
      </table>  
     </div> 
    </div> 
</div> 

行から削除マージンのCSSを追加します。

Answer 2

は、このようなHTMLを追加します。私は働くフィドルを作りました。

<div class="row"> 
    <div class="col-sm-6 col-md-5 col-lg-6"> 
    <center><h4>GÜNLÜK DEMİR FİYATLARI</h4></center> 
    <table class="table table-striped"> 
    <thead> 
    <tr> 
    <th>Bölge</th> 
    <th>Tarih</th> 
    <th>Kalın Demir</th> 
    <th>İnce Demir</th> 
    </tr> 
    </thead> 
    </table> 
    </div> 
    <div class="col-sm-6 col-md-5 col-lg-6"> 
    <center><h4>PİYASA FİYATLARI</h4></center> 
    <table class="table table-striped"> 
    <thead> 
    <tr> 
    <th>Döviz</th> 
    <th>Tarih</th> 
    <th>Alış</th> 
    <th>Satış</th> 
    </tr> 
    </thead> 
    </table> 

    </div> 
</div> 

https://jsfiddle.net/ouwf90br/