Html 响应CSS表

我创建了一个表格宽度为4个图像，它们被放置在一行四列（1x4）中

我的问题是我需要在手机上看到两行两列（2x2）的图像

---

我该怎么做？我看到很多负责的表将1列和4行转换为4列和1行，但我找不到一个适合我的表。

您要找的词是“响应”，而不是“负责”

我该怎么做？我看到很多负责的表将1列和4行转换为4列和1行，但我找不到一个适合我的表

---

大多数使用列来实现这一点

响应性设计不能通过表格进行。使用其他方式。我建议使用弹性容器或浮式容器。

---

网站是为flex容器而设。

回答实际问题，是的，你可以制作一些响应性强的表格，但这将涉及到，因为

表格在70年代创建时从来就不需要响应。当你试图用它们做更高级的事情时，你可能已经没有选择了

CSS中布局的现代方法是使用类似flexbox的东西。您可以这样解决问题：

<div class="container">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
</div>


.container {
  display: flex;
  flex-wrap: wrap;
}

.container > .col {
  background: tomato;
  padding: 16px;
  border: 5px solid black;
  width: 50%;
}

@media (min-width: 599px) {
  .container > .col {
    width: 25% !important;
  }
}


1.
2.
3.
4.
.集装箱{
显示器：flex；
柔性包装：包装；
}
.container>.col{
背景：番茄；
填充：16px；
边框：5px纯黑；
宽度：50%；
}
@介质（最小宽度：599px）{
.container>.col{
宽度：25%！重要；
}
}

请在此处查看它的实际操作：。关键是
flex-wrap:wrap
，如果元素超过容器的大小，则允许元素溢出到下一行

关于flexbox，您需要了解的全部信息如下：

在原生css中似乎有一个全新的网格系统，它似乎可以实现flexbox和其他功能的所有优点：。
您可以尝试这个简单的解决方案

首先，在要打断行的位置添加一个td占位符（td with class resp）

当您将浏览器窗口的大小减小到768px以下时，它将在第一行中断2个图像，在第二行中断2个图像

您可以将此方法应用于超过4列，并在需要时设置占位符。
尝试使用Flexbox或Bootstrap网格系统等网格系统。您也可以创建自己的网格系统，但您只是在重新发明轮子

响应性还与您标记CSS属性的方式有关，这是一个简单的示例：-

<div class="container">
Text content </div>

.container {
width:3px;   <!-- vs width:3%; --> }


文本内容
.集装箱{
宽度：3px；}

使用%值而不是像素硬编码值，可以改变网站的响应能力

开发自己的网格系统的有用资源-
没问题。了解正确的术语可以使研究问题的解决方案变得容易得多。
<div class="container">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
</div>


.container {
  display: flex;
  flex-wrap: wrap;
}

.container > .col {
  background: tomato;
  padding: 16px;
  border: 5px solid black;
  width: 50%;
}

@media (min-width: 599px) {
  .container > .col {
    width: 25% !important;
  }
}

   <table class="insrtTable">

        <tr>
            <td><img src="img1.png"></td>
            <td><img src="img2.png"></td>
            <td class="resp"></td>
            <td class=""><img src="img3.png"></td>
            <td class=""><img src="img4.png"></td>
        </tr>
    </table>

@media only screen and (max-width: 767px), (min-device-width: 768px) and (max-device-width: 1024px) {

    thead, tbody, th, td.resp, tr {
        display: block;
    }
}

<div class="container">
Text content </div>

.container {
width:3px;   <!-- vs width:3%; --> }