如何将三栏 table 变成两栏 table 用于移动设备

Question

我需要在移动设备上将三栏 table 变成两栏 table。这应该支持IE。它目前在调整视口大小时确实会变成两列，但行中的第三个项目表现得很奇怪，向左或向右浮动，然后缺少一个插槽。我希望它看起来更像我使用 flex 或 grid 时的样子，并具有一定的连续性。我想将代码更改为 flexbox 但不确定 IE 支持。有谁知道我该怎么做？

.topcolumn {
    float: left;
     padding: 10px;
  /*width: 250px;*/
 } 

/* Create two equal columns that floats next to each other */
.column {
    float: left;
     padding: 10px;
  width:300px;
 }

/* Clear floats after the columns */
.row{
    display: table;
    clear: left;
}

<!-- New Row Start -->
<div class="row">
<div class="column"><br>
<div class="name">Don Abrams, M.D.</div>
<div class="BoardTitle">Vice President, Graduate Medical Education</div>
</div>
<!-- BREAK --->
<div class="column"><br>
<div class="name">Charles Albrecht, M.D.</div>
<div class="BoardTitle">Chief Quality Officer</div>
</div>
<!-- BREAK --->
<div class="column"><br>
<div class="name">Debra Morton</div>
<div class="BoardTitle">Interim Chief Nursing Officer<br>
</div>
</div>
<!-- BREAK --->

Answer 1

继续使用 flexbox 来解决这个问题。 According to the MDN you should be okay. 来自网站：

Internet Explorer 10, which implemented the display: flexbox version of the specification with the -ms- prefix.

Note also that Internet Explorer 11 supports the modern display: flex specification however it has a number of bugs in the implementation.

Answer 2

据我所知和经验，它总是使用媒体查询。

但是！为了使长运行更容易（第一次学习时很棘手），我会考虑研究以网格格式布置组件。这将使您能够根据不同的产品分辨率更改网格的尺寸。祝你好运！

媒体查询示例：

@media only screen and (min-width: 400px) {}

可能有用的资源还有：https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/#:~:text=Combining%20media%20query%20expressions,that%20are%20600%2D400px%20wide。

如何将三栏 table 变成两栏 table 用于移动设备

How to make a three column table into a two column table for mobile

html

css

html-table

responsive