并排显示表格的行 [英] Display rows of a table side by side

问题描述

我有一个具有两列和24行的表(从数据库中加载，因此它是一个动态表).现在，我希望表格行自动并排显示(因为它适合屏幕)，例如左侧部分保留12行，右侧部分保留12行，或者(如果屏幕足够宽)，例如具有8行的三列，依此类推. html/css是否可能?

I have one table with two columns and e.g 24 rows (loaded from a database, so its a dynamic table). Now I want the table rows displayed side by side automatically (as it fits the screen), e.g. the left part holds 12 rows and the right part holds 12 rows, or (if the screen is wide enough) e.g. three columns with 8 rows and so on. Is that possible with html/css?

示例:
这将正常显示表格:

Example:
This would display the table normally:

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

这就是我想要的(并排放置的桌子的部分数量取决于屏幕尺寸和桌子的尺寸):

This is what I want to have (the number of parts of the table placed side by side depends on screen size and table size):

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

推荐答案

如果您能够使用div代替表元素，那么我建议您使用div编写整个内容，并使用CSS使div像一张桌子.我编写了移动设备优先方法，因此我将其编码为看起来像移动设备上的标准表格，然后随着屏幕尺寸的增加，获得所需的外观.显然，您需要使用断点并调整每个组"对于每种屏幕尺寸的宽度，以获取所需的适当列数.不幸的是，您必须在每个位置重复表头，这是不可避免的，但是您可以将其隐藏在移动设备上.

If you have the ability to use divs instead of table elements, then I would suggest writing the whole thing out using divs and use css to make the divs act like a table. I write a mobile first approach, so I coded it to look like a standard table on mobile, then as you increase in screen size you get the look you want. Obviously you'd play with break points and adjust how wide each "group" is for each screen size to get the appropriate number of columns you want. Unfortunately, you have to repeat your table headers at every point, it's just unavoidable doing what you are looking to do... however you can hide them on mobile.

提示:缩小小提琴上的屏幕以查看表格的移动"版本...将其展开以查看更大的表格.演示只有两种尺寸.添加任意数量的

HINT: shrink the screen on the fiddle to see a "mobile" version of the table... expand it to see a larger one. There's only two sizes for demo. Add as many as you'd like.

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/

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