响应式 CSS 表

Posted 2023-03-06

技术标签:

【中文标题】响应式 CSS 表【英文标题】：Responsive CSS table 【发布时间】：2018-02-24 23:08:34 【问题描述】：

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

<table class="insrtTable">

     <tr>
      <td><img src=Guitarra.png></td>
      <td><img src=Bajo.png></td>
      <td><img src=Teclado.png></td>
      <td><img src=Ukelete.png></td>
     </tr>
</table>

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

<table class="insrtTable">

     <tr>
          <td><img src=Guitarra.png></td>
          <td><img src=Bajo.png></td>    
     </tr>
     <tr>
          <td><img src=Teclado.png></td>
          <td><img src=Ukelete.png></td>
     </tr>
</table>

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

【问题讨论】：

【参考方案1】：

要回答实际问题，是的，您可以制作一些响应式表格，但这将涉及unnecessary hacking，因为tables 在创建它们的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;

在此处查看实际操作：https://codepen.io/nicooga/pen/MEwZgZ。关键是flex-wrap: wrap，如果元素超过容器的大小，它允许元素溢出到下一行。

您需要了解的有关 flexbox 的所有信息都在这里：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

似乎在原生 css 中有一个全新的网格系统，它似乎完成了 flexbox 的所有优点等等：https://css-tricks.com/snippets/css/complete-guide-grid/。

【讨论】：

【参考方案2】：

尝试使用像 Flexbox 或 Bootstrap 网格系统这样的网格系统。您也可以制作自己的网格系统，但您只是在重新发明***。

响应性也与你如何标记你的 CSS 属性有关，一个简单的例子：-

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

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

使用 % 值而不是像素硬编码值，可以对您的网站响应能力产生影响。

开发自己的网格系统的有用资源-https://zellwk.com/blog/responsive-grid-system/

【讨论】：

【参考方案3】：

你可以试试这个简单的解决方案。

首先，在要换行的地方添加一个 td 占位符（td with class resp）

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

当您将浏览器窗口的大小减小到 768 像素以下时，它会破坏第一行的 2 个图像和第二行的 2 个图像。

您可以将此方法应用于 4 个以上的列，在需要的位置设置占位符。

【讨论】：

【参考方案4】：

响应式设计无法使用表格进行。使用其他方式。我建议使用 flex-container 或浮动和清除。 This 网站用于弹性容器。

【讨论】：

【参考方案5】：

您要查找的词是“响应式”，而不是“负责任”。