Question

如何将响应表放在另一个旁边？我使用了下面分享的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>
      <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。

如何在一列中放置两个响应表？

Answer 1

像这样添加HTML：

<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以从行中删除边距：

.table-row .row{margin:0}

Answer 2

您需要使用col-classes包装表（和标题）。我创造了一个工作小提琴。

<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/

如何在一列中放置两个响应表？

2 个答案: