Question

我想在响应式视图中排列table一列低于另一列。

这是HTML：

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>A1</td>
    <td>B1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
  </tr>
  <tr>
    <td>A...</td>
    <td>B...</td>
  </tr>
</table>

+---------+-------------+
|    A    |    **B**    |
+---------+-------------+
|    A1   |    **B1**   |
+---------+-------------+
|    A2   |    **B2**   |
+---------+-------------+
|    A... |    **B...** |
+---------+-------------+

到

+-------------+
|      A      |
+-------------+
|      A1     |
+-------------+
|      A2     |
+-------------+
|      A...   |
+-------------+
|    **B**    |
+-------------+
|    **B1**   |
+-------------+
|    **B2**   |
+-------------+
|    **B...** |
+-------------+

这必须是一个表。我怎样才能做到这一点？

如何清楚地了解媒体查询。

jQuery或原生CSS也没关系。

Answer 1

将display:block设为td{ display:block }可行但不是行。

＆＃13;

<table border=1 cellpadding=6 cellspacing=0>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>A1</td>
    <td>B1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
  </tr>
</table>

＆＃13;

numpy.array()

＆＃13;

Answer 2

您可以通过以新方式包装表来实现所需的结构。

然后可以将新表格行设置为

display：flex

您可以通过设置每个

的顺序来获得所需的订单

TD：第n个孩子（2N）

＆＃13;

$('td').unwrap();
$('td').wrapAll('<tr></tr>');

＆＃13;

tr {
display: flex;
flex-direction: column;
}

td:nth-child(2n) {
order: 2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>A1</td>
    <td>B1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
  </tr>
  <tr>
    <td>A...</td>
    <td>B...</td>
  </tr>
</table>

＆＃13;

Answer 3

＆＃13;

.table td {
  border: 1px solid;
  display: block;
}

＆＃13;

<table class="table">
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>A1</td>
    <td>B1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
  </tr>
</table>

＆＃13;

Answer 4

杰里钻机

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>A1</td>
    <td>B1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
  </tr>
</table>

CSS

tr{
  display: flex;
  flex-direction: column;
}
table{
  display: flex:
  flex-direction: column;
}
td{
  border: 1px
}

的javascript

$(document).ready(function(){
    $fline = $('table tr td:first-child');
  $sline = $('table tr td:last-child');

  $('table').html('<tr></tr><tr></tr>');
  $fline.each(function(){
    $('table tr:first-child').append($(this));
  });
  $sline.each(function(){
    $('table tr:last-child').append($(this));
  });
});

Answer 5

这是你可以做到这一点的一种方式。您需要使用media queries将布局更改为flex并更改td的顺序以及jquery以从td包装/展开tr元素。< / p>

当窗口宽度<1时，它会改变。 480像素。

＆＃13;

var html = $('tbody').html();
var c = false;

$(window).on("resize", function() {
  if ($(window).width() < 480) {
    if (c == false) {
      $('td').unwrap()
      c = true;
    }
  } else {
    $('tbody').html(html)
    c = false;
  }
}).resize();

＆＃13;

@media(max-width: 480px) {
  tbody {
    display: flex;
    flex-direction: column;
  }
  td:nth-child(2n + 1) {
    order: -1;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A1</td>
      <td>B1</td>
    </tr>
    <tr>
      <td>A2</td>
      <td>B2</td>
    </tr>
  </tbody>
</table>

＆＃13;

表一列低于另一列

5 个答案: