Question

我在打破桌子时遇到麻烦，反应更敏捷。请看一下这些图片，并告诉我如何使用css。

Image of existing table to break

Image of the desired result

Answer 1

我认为这会对你有帮助。

<!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 2

您可以重置显示并使用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>

使用mediaqueries在需要时更新显示。的 DEMO

Answer 3

我认为只使用CSS就可以打破一个表。为了做你想做的事你需要使用JS，并根据窗口的宽度重新构建你的表。

但是，如果您只是想提高网站的响应速度，那么您可以在此处使用一些有趣的技巧：https://css-tricks.com/responsive-data-table-roundup/

Answer 4

没有JavaScript，实际上不可能，你不能设置表的列分隔符。

其他选项可能是使用flexbox网格将表重做为div。

Answer 5

这不是表的用途。你可以破解表格样式但这是不好的做法。更容易使用例如：

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

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

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

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>

如何使用媒体查询中断表？

6 个答案: