时间戳

首页 > 解决方案 > 多列时表换行

html - 多列时表换行

问题描述

我们有一个表，列由数据填充，每个表都不同，我们不知道我们将拥有多少列。

当有太多列时，表格会变长。因此，当列数超过 4 时，表应该开始一个新行。每行的标题也应复制。

这张图片应该清楚地表明：

示例表

注意：表格没有固定宽度，宽度取决于您使用的设备，因此宽度应为 100%，而不是固定像素宽度。

所有列都具有相同的高度和宽度，但不是固定值，这些也取决于所使用设备的宽度。

当红色块要换行时，所有行都应该堆叠在一起。可以这么说，这 3 行应该被视为 1 行。

标签： htmlcsshtml-table

解决方案

它仍然有一些错误小心

溢出时需要使用 JS/jQuery 创建新标头

像这样！

//Put to document ready
checktable();
$(window).on('resize', function() {
  checktable();
});


function checktable() {
  if ($(window).width() < $(document).width()) {
    if ($('tr.extended').length < 1) {
      $('tr').not('.extended').each(function(i, e) {
        $(document.createElement('tr'))
          .addClass('extended')
          .append($(e).html())
          .appendTo('#table');
        $(e).children('td').each(function(j, ele) {
          var eot = +$(ele).offset().left +
            +$(ele).width();
          if ($(window).width() < eot) {
            $(ele).hide();
            $('tr.extended').eq(i)
              .children('td').eq(j)
              .show();
          } else {
            $(ele).show();
            $('tr.extended').eq(i)
              .children('td').eq(j)
              .hide();
          }
        });
      });
    }
  } else {
    $('td').not('.extended').show();
    $('.extended').remove();
  }
}
td,
th {
  white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="table" border=1>
  <tr>
    <th>
      head
    </th>
    <td>
      so long data 1
    </td>
    <td>
      so long data 2
    </td>
    <td>
      so long data 3
    </td>
    <td>
      so long data 4
    </td>
    <td>
      so long data 5
    </td>
    <td>
      so long data 6
    </td>
  </tr>
  <tr>
    <th>
      head2
    </th>
    <td>
      much long data 1
    </td>
    <td>
      much long data 2
    </td>
    <td>
      much long data 3
    </td>
    <td>
      much long data 4
    </td>
    <td>
      much long data 5
    </td>
  </tr>
</table>

推荐阅读