并排显示一排桌子

Question

我有一个有两列，例如24行的表格（从数据库加载，所以它是一个动态表格）。现在我希望表格行自动并排显示（如适合屏幕），例如左边部分保持12行，右边部分保持12行，或者（如果屏幕足够宽）例如三列8行等。 这可能与HTML/CSS？

示例：
这将正常显示的表格：

<table> 
<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead> 
<tbody> 
    <tr><td>1.1</td><td>1.2</td></tr> 
    <tr><td>2.1</td><td>2.2</td></tr> 
</tbody> 
</table> 

这是我希望有什么（由并排放置表中的部件的数量取决于屏幕尺寸和表大小）：

<table style="float: left;"> 
<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead> 
<tbody> 
    <tr><td>1.1</td><td>1.2</td></tr> 
</tbody> 
</table> 

<table style="float: right;"> 
<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead> 
<tbody> 
    <tr><td>2.1</td><td>2.2</td></tr> 
</tbody> 
</table> 

Answer 1

你想做的事没有从根本上打破表是如何工作的应该是不可能与标准的HTML表（我什至不知道，如果你可以的方式，会得到你想要的结果，修改CSS什么）。

正如@Daniel C所建议的，您可能想考虑使用div而不是表格。

在与Bootstrap或Foundation报价等响应式网格布局配合使用时，您应该可以做些什么。

Answer 2

简短的回答：如果你需要一些响应，它会有点困难，只是表。我建议使用bootstrap +表。

所以每个表看起来就像这样：

<div class="col-xs-6 col-sm-4 col-md-3"> 
    <table class="blue"> 
    <thead> 
     <tr> 
     <th>Col 1</th> 
     <th>Col 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>1.1</td> 
     <td>1.2</td> 
     </tr> 
     <tr> 
     <td>2.1</td> 
     <td>2.2</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

这是一个活生生的例子：https://jsfiddle.net/xwazzo/7x0v9hL6/

请注意，您将需要一个大屏幕上看到的jsfiddle的响应。

龙答： 如果你想响应表，存在CSS技巧有关，一个伟大的文章 https://css-tricks.com/accessible-simple-responsive-tables/

Answer 3

如果你使用的div，而不是表元素的能力，那么我会建议使用div编写整个事情，并使用CSS来使div像一张桌子一样行事。我写了一个移动的第一个方法，所以我将它编码为移动设备上的标准表格，然后随着屏幕尺寸的增加，您可以获得所需的外观。很明显，你会玩断点并调整每个“组”对于每个屏幕大小的宽度，以获得所需的适当数量的列。不幸的是，你必须在每一处重复你的表格标题，这是你不可避免的做你想做的事情......但是你可以将它们隐藏在移动设备上。

建议：缩小屏幕上的小提琴看到“移动”版本的表...扩大它看到一个更大的。演示只有两种尺寸。尽可能多地添加你想要的。

HTML标记：

<div class="table"> 
<div class="group"> 
    <div class="table-row table-head table-head-main"> 
    <div class="table-cell">Col 1</div> 
    <div class="table-cell">Col 2</div> 
    </div> 
    <div class="table-row"> 
    <div class="table-cell">1.1</div> 
    <div class="table-cell">1.2</div> 
    </div> 
</div> 
<div class="group"> 
    <div class="table-row table-head"> 
    <div class="table-cell">Col 1</div> 
    <div class="table-cell">Col 2</div> 
    </div> 
    <div class="table-row"> 
    <div class="table-cell">2.1</div> 
    <div class="table-cell">2.2</div> 
    </div> 
</div> 
</div> 

CSS代码：

.table { 
    display: table; 
    width: 100%; 
} 

.table-row { 
    display: table-row; 
    width: 100%; 
} 

.table-head div { 
    background: #cccccc; 
} 

.table-cell { 
    display: table-cell; 
    border: 1px dotted #000000; 
} 

.table-head { 
    display: none; 
} 

.table-head-main { 
    display: table-row; 
} 

.group { 
    display: table-row-group; 
} 

@media (min-width: 600px) { 
    .table-head { 
    display: table-row; 
    } 
    .group { 
    display: table; 
    float: left; 
    width: 50%; 
    } 
} 

https://jsfiddle.net/5s3cz15t/1/