Question

我有一个在jQuery上运行的应用程序，它通过在html元素中附加新创建的表来获取一些数据并创建tables div。表格显示正常，但我希望它们彼此相邻，以便用户可以2到2看到它们，并避免一直向上和向下滚动。

代码结构：

<div id=example>
 <table id=1>
  <tr>
   <td>..</td><td>..</td>
  </tr>
 <table>
 <table id=2>
  <tr>
   <td>..</td><td>..</td>
  </tr>
  more rows..
 <table>
</div>

表具有动态行数，而某些行具有不同数量的单元格。

想要的结果是：

table1 |表2
table3 |表4
table5 |表6
等

如何在html（构建表格时）或jQuery选择器和过滤器之后这样做？

Answer 1

如果您使用的是bootstrap，则可以使用他们的网格系统：Bootstrap Grid System

如果你没有，那么你可以把你的表放在宽度为50％的父div中，然后将两个父div放在另一个div中，宽度为100％。它可能会变得混乱，因为桌子的宽度和屏幕宽度等。

如果您还没有使用css框架，我强烈建议您使用css框架。

Answer 2

选项I - 使用Float css。
示例：

<div style="float: left;width: 49%;">
    <!--table 1-->
</div>
<div style="float: right;width: 49%;">
    <!--table 2-->
</div>

选项II - 将您的桌子放在另一张桌子中
例如：

<table>
    <tbody>
        <tr>
            <td>table 1</td>
            <td>table 2</td>
        </tr>
        <tr>
            <td>table 3</td>
            <td>table 4</td>
        </tr>
        <tr>
            <td>table 5</td>
            <td>table 6</td>
        </tr>
    </tbody>
</table>

Answer 3

您可以使用Bootstrap来管理网格系统，或者使用CSS来执行此操作。我不能以你为例说明你的代码。

Answer 4

由于您已经在创建表，因此您也可以创建嵌套表。当然，你可以根据自己的心愿设计和调整所有这些。

＆＃13;

table       { border: solid 1px black }
table table { border: solid 1px red }

＆＃13;

<table id=TMain>
  <tr>
    <td>
      <table id=T1a>
        <tr><td>..</td><td>..</td><td>..</td></tr>
      </table>
    </td>
    <td>
      <table id=T1b>
        <tr><td>..</td><td>..</td></tr>
        <tr><td>..</td><td>..</td></tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table id=T2a>
        <tr><td>..</td><td>..</td></tr>
        <tr><td>..</td><td>..</td></tr>
        <tr><td>..</td><td>..</td></tr>
      </table>
    </td>
    <td>
      <table id=T2b>
        <tr><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td></tr>
      </table>
    </td>
  </tr>
</table>

＆＃13;

Answer 5

尝试不同的事情后，最简单的解决方案是使用float: left/right。

我的解决方案基于Jan Derk的回答post。

由于我只想要2列，所以我在表格中使用了jQuery("table").each(function(index, value) { if(index%2===0){ jQuery(this).css({"float": "center","width": "45%"}); }else { jQuery(this).css({"float": "left","width": "45%"}); } });属性：

Div

然后在我分配了这些CSS属性的周围jQuery("#div_id").css({"display":"flex","flex-wrap":"wrap", "justify-content": "center"});元素上：

var db = {
    	"name": "Nkosana",
    	"middle": "Baryy",
    	"surname": "walked",
    	"batch_number": "test,b",
    	"temp": ",,67,6,87,86,5,67865,876,67",
    	"integrity": ",,,,,,,,,,,,,,,,,,,,,,,",
    	"weight": "760,765,755,758,759,758,758,769,758,762,759,7",
    	"comment": "oh la la",
    };

for (var key in db) {
  if (db.hasOwnProperty(key)) {
  	if(db[key].indexOf(',')>-1){
       console.log(key+' | ' + db[key]);
    }
  }
}

此解决方案也具有响应能力，并在您调整窗口大小或使用移动屏幕时动态调整大小。

Answer 6

很简单，你可以用css做到这一点。使用css选择器它将选择div中的所有表并将它们设置为宽度50％。使用这样的css：

<style>
    #example table{
        width: 50%;
    }
</style>

如果这不能很好地工作，那么像这样添加浮动：

<style>
    #example table{
        float: left;
        width: 50%;
    }
</style>

如何在2列中显示多个html表

6 个答案: