Question

我们已经检查了网络和SO以获得解决方案，但是没有找到解决我们特定问题的方法。

我们使用以下表格格式来表达联系方式：

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

使用媒体查询，是否可以制作COLS3＆amp; 4坐在COLS1＆amp; 2下（见下文）？

<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>    
<td colspan="2">COL3-4</td></tr>
<td>COL3</td><td>COL4</td></tr>
<td>COL3</td><td>COL4</td></tr>
<td>COL3</td><td>COL4</td></tr>

提前感谢您的帮助！

Answer 1

是的，但不仅仅是单纯的CSS。您可以重组表，以便第1列和第2列嵌套在表中，第3列和第4列嵌套在表中。如果您按原样重新编写表，则可以创建一个媒体查询来为两个表中的每一个分配显示块，因此右侧的表将包装在左侧的表下。

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表以进行响应式设计

1 个答案: