如何使用媒体查询打破 table？

Question

我在破解 table 时遇到了问题，以提高响应速度。请看看这些图片，并告诉我如何使用 css。

Answer 1

我认为仅使用 CSS 是不可能破坏 table 的。为了做你想做的事，你需要使用 JS 并根据 window 的宽度，你将重新构建你的 table.

但是，如果您只是为了提高网站的响应速度而进行搜索，那么这里有一些有趣的技巧：https://css-tricks.com/responsive-data-table-roundup/

Answer 2

没有 JavaScript 真的不可能，你不能设置 table 分栏符的样式。

其他选项可能是使用 flexbox 网格重做 table 到 div。

Answer 3

这不是 table 的目的。您可以破解 tables 样式，但这是不好的做法。更容易使用例如：

较旧的 bootstrap 网格 - https://getbootstrap.com/

或更好的 flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

编辑 table、tr、tbody 和其他显示也是不好的做法，它会破坏它的功能（垂直对齐和许多其他）。只需使用 div 并将它们设置为响应式 table。最好使用 flexbox 或至少 bootstrap 网格来设计样式。

Answer 4

我想这会对你有所帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table responsive</title>
<style>
body {
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
}
table {
    width:100%;
    text-align:center;
}
td {
    border-bottom:1px solid #ccc;
    padding:10px 0;
}
 @media (max-width:600px) {
table {
    display:block;
    width:100%;
    padding:0;
    margin:0 auto;
}
tbody, tr {
    display:block;
    width:100%;
}
table td {
    display:inline-block;
    float:left;
    width:50%;
}
td[colspan="2"] {
    display:block;
    width:100%;
}
}
</style>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>TD00</td>
    <td>TD01</td>
    <td colspan="2">Colspan 2</td>
    <td colspan="2">Colspan 2</td>
  </tr>
  <tr>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
  </tr>
  <tr>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
  </tr>
  <tr>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
  </tr>
</table>
</body>
</html>

Answer 5

您可以重置显示并使用 flex 模型：

/* break table */
tr {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

td {
  display: block;
  width: 50%;
  text-align: center;
}

td[colspan] {
  width: 100%;
}

/* demo purpose */
table {
  counter-reset: tds;
  counter-increment: tds -1;
  width: 100%;
}

td {
  border: solid 1px;
}

td:before {
  counter-increment: tds;
  content: 'TD 'counter(tds);
}

body {
  width: 500px;
  margin: auto;
}




* {
  box-sizing: border-box;
}

<table>
  <tr>
    <td> </td>
    <td> </td>
    <td colspan="2"> </td>
    <td colspan="2"> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td colspan="2"> </td>
    <td colspan="2"> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

使用媒体查询在需要时更新显示。 DEMO

Answer 6

请试试这个

<style type="text/css">


   td {
        border: 1px solid;
        text-align: center;
    }
    .t1{
        margin: 0 auto;
        text-align: center;
        min-width: 600px;
    }
    .t2{
        margin: 0 auto;
        text-align: center;
        display: none;
    }
      @media (max-width: 600px){
            .t1{display: none;}
            .t2{display: table;width: 100%;}
         }
</style>

HTML

      <tr>

           <td>dsds</td>
           <td>dsdsd</td>
           <td colspan="2">sds</td>
           <td colspan="2">dsdd</td>

      </tr>
      <tr>

           <td>dsds</td>
           <td>dsdsd</td>
           <td>sds</td>
           <td>dsdd</td>
           <td>sds</td>
           <td>dsdd</td>

      </tr>
      <tr>

           <td>dsds</td>
           <td>dsdsd</td>
           <td colspan="2">sds</td>
           <td colspan="2">dsdd</td>

      </tr>
      <tr>

           <td>dsds</td>
           <td>dsdsd</td>
           <td>sds</td>
           <td>dsdd</td>
           <td>sds</td>
           <td>dsdd</td>

      </tr>

      <tr>

           <td>dsds</td>
           <td>dsdsd</td>


      </tr>
      <tr>

          <td colspan="2">sds</td>

      </tr>
      <tr>


           <td colspan="2">dsdd</td>

      </tr>
      <tr>

           <td>dsds</td>
           <td>dsdsd</td>

      </tr>

如何使用媒体查询打破 table？

How to break table using media query?

css

css-tables