Bootstrap 中的两个并排表 [英] Two Side-by-Side Tables in Bootstrap

问题描述

是否可以在 Bootstrap 3 中并排显示两个表?

每个人都尝试制作一个 col-md-6，尽管它缩小了宽度，但它们不会彼此环绕(而是在全角视图中一个在另一个的顶部).

 
<table class="table table-striped"><头><tr><th class="col-md-1">#</th><th class="col-md-2">Header</th><th class="col-md-3">Header</th></tr></thead><tr><td class="col-md-1">1,001</td><td class="col-md-2">1,001</td><td class="col-md-3">1,001</td></tr><tr><td class="col-md-1">1,001</td><td class="col-md-2">1,001</td><td class="col-md-3">1,001</td></tr><tr><td class="col-md-1">1,001</td><td class="col-md-2">1,001</td><td class="col-md-3">1,001</td></tr></tbody>
<h2 class="sub-header">最新事件</h2><div class="table-responsive"><table class="table table-striped"><头><tr><th class="col-md-1">#</th><th class="col-md-2">Header</th><th class="col-md-3">Header</th></tr></thead><tr><td class="col-md-1">1,001</td><td class="col-md-2">1,001</td><td class="col-md-3">1,001</td></tr><tr><td class="col-md-1">1,001</td><td class="col-md-2">1,001</td><td class="col-md-3">1,001</td></tr><tr><td class="col-md-1">1,001</td><td class="col-md-2">1,001</td><td class="col-md-3">1,001</td></tr></tbody>

解决方案

您需要将每个表包装在 col-6 div 中，而不是将 col-6 应用于表本身.这是带有 col-xs-6 的代码:

<h2 class="sub-header">副标题</h2><div class="table-responsive"><table class="table table-striped">...

它正在运行:http://www.bootply.com/lbrQZF3152

Is it possible to display two tables, side-by-side, in Bootstrap 3?

Each tried making each one col-md-6 and, although it shrinks the width, they don't wrap next to each other (instead one is on top of the other in the full-width view).

 <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th class="col-md-1">#</th>
                  <th class="col-md-2">Header</th>
                  <th class="col-md-3">Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                 <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
              </tbody>
            </table>
          </div>
          <h2 class="sub-header">Latest Incidents</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th class="col-md-1">#</th>
                  <th class="col-md-2">Header</th>
                  <th class="col-md-3">Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                 <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
              </tbody>
            </table>

解决方案

You need to wrap each table in a col-6 div, as opposed to applying col-6 to the table itself. Here is your code with col-xs-6 wrapped around:

<div class="col-xs-6">
  <h2 class="sub-header">Subtitle</h2>
  <div class="table-responsive">
    <table class="table table-striped">...

And here it is in action: http://www.bootply.com/lbrQZF3152

这篇关于Bootstrap 中的两个并排表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！