如何按列拆分html表以进行响应式设计 [英] How to split a html table by columns for responsive design

问题描述

我们已经检查了Web和SO的解决方案，但没有找到解决我们特定问题的方法.

We've checked the web and SO for a solution to this, but have found nothing to solve our specific problem.

我们将以下表格格式用于联系人公式:

We are using the following table format for a contact formular:

<table>
  <tr>
    <td colspan="2">COL1-2</td>
    <td colspan="2">COL3-4</td>
  </tr>
  <tr>
    <td>COL1</td>
    <td>COL2</td>
    <td>COL3</td>
    <td>COL4</td>
  </tr>
  <tr>
    <td>COL1</td>
    <td>COL2</td>
    <td>COL3</td>
    <td>COL4</td>
  </tr>
  <tr>
    <td>COL1</td>
    <td>COL2</td>
    <td>COL3</td>
    <td>COL4</td>
  </tr>
</table>

使用媒体查询，是否可以使COLS3&4坐在COLS1& 2下(见下文)?

Using media queries, is it possible to make COLS3 & 4 sit under COLS1 &2 (see below)?

<table>
  <tr>
    <td colspan="2">COL1-2</td>
    <tr>
      <td>COL1</td>
      <td>COL2</td>
    </tr>
    <tr>
      <td>COL1</td>
      <td>COL2</td>
    </tr>
    <tr>
      <td>COL1</td>
      <td>COL2</td>
    </tr>
    <tr>
      <td colspan="2">COL3-4</td>
    </tr>
    <tr>
      <td>COL3</td>
      <td>COL4</td>
    </tr>
    <tr>
      <td>COL3</td>
      <td>COL4</td>
    </tr>
    <tr>
      <td>COL3</td>
      <td>COL4</td>
    </tr>
</table>

推荐答案

是的，但不仅仅是在CSS中.您可以重组表，以使第1列和第2列嵌套在表中，而第3列和第4列嵌套在表中.如果按这种方式重新构造了表格，则可以创建一个媒体查询来分配两个表格显示块中的每一个，因此，右侧的表格将包装在左侧的表格下方.

Yes but not purely in CSS alone. You could restructure the table so that column 1 and 2 are nested within a table, and column 3 and 4 are nested within a table. If you restuctured the table as such, you could create a media query to assign each of the two tables display block, so the table to the right would wrap under the table on the left.

table table { display:inline-block;vertical-align:top; }

<table border="1">
      <tr>
          <td class="wrap">
              <table border="1">
                  <tr><td colspan="2">COL1-2</td></tr>
                  <tr><td>COL1</td><td>COL2</td></tr>
                  <tr><td>COL1</td><td>COL2</td></tr>
                  <tr><td>COL1</td><td>COL2</td></tr>
              </table>
              <table border="1">
                  <tr><td colspan="2">COL3-4</td></tr>
                  <tr><td>COL3</td><td>COL4</td></tr>
                  <tr><td>COL3</td><td>COL4</td></tr>
                  <tr><td>COL3</td><td>COL4</td></tr>
              </table>
          </td>
      </tr>
    </table>

table table {display:block;} 包装.

这篇关于如何按列拆分html表以进行响应式设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！