Question

我有一个包含2个标题列和4列链接的表。下面的示例代码。

table{
    border: 1px solid black;
    table-layout: fixed;
    width:100%
}


th, td{
    border: 1px solid black;
    overflow: hidden;
}

td {
  width:25%;
}

 
<table class="fixed-width">
   <tr>
      <th colspan=2>header 1</th>
      <th colspan=2>header 234567895678657</th>
   </tr>
   <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>
      <td>link 3</td>
      <td>link 4</td>
   </tr>
   <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>
      <td>link 3</td>
      <td>link 4</td>
   </tr>
   <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>
      <td>link 3</td>
      <td>link 4</td>
   </tr>
   <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>
      <td>link 3</td>
      <td>link 4</td>
   </tr>
</table>

https://jsfiddle.net/pse6thr8/21/

当移动设备访问它时，我希望该表看起来像这样。 New Table

Answer 1

您也可以使用媒体查询，请尝试此操作

@media (min-width: 769px) and (max-width: 979px) {
    /*
        Styles for display width 
        between 769 and 979 pixels
    */
}

@media (max-width: 768px) {
    /*
        Styles for display width 
        equal to 768 pixels and thinner
    */
}

@media (min-width: 1200px) {
    /*
        Styles for display width 
        equal to 1200 pixels and wider
    */
}

Answer 2

在HTML表格中，行不能像您需要的那样彼此分开。首先，您需要将左右桌分开。因此，当你写出正确的css时，右边的那个会低于第一个表格。

分离后，为设备写入宽度特定的css。

喜欢这个;

＆＃13;

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 50%;
  float:left;
}

th,
td {
  border: 1px solid black;
  overflow: hidden;
}

td {
  width: 25%;
}
@media (max-width:500px){
  table{width:100%}
}

＆＃13;

<table class="fixed-width" style="border-right:none;">
  <tbody>
    <tr>
      <th colspan="2">header 1</th>

    </tr>
    <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>

    </tr>
    <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>

    </tr>
    <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>

    </tr>
    <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>

    </tr>
  </tbody>
</table>
<table>
  <tr>
    <th colspan="2">header 234567895678657</th>
  </tr>
  <tr>
    <td>link 3</td>
    <td>link 4</td>
  </tr>
  <tr>
    <td>link 3</td>
    <td>link 4</td>
  </tr>
  <tr>
    <td>link 3</td>
    <td>link 4</td>
  </tr>
  <tr>
    <td>link 3</td>
    <td>link 4</td>
  </tr>
</table>

＆＃13;

Answer 3

有两种不同的方法可以做到这一点......

使用引导列或
在较小的视图中折叠为标签或手风琴

首先检查bootstrap列的工作方式，

首先，将Bootstrap.min.css文件添加到您的

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Check this fiddle

然后您的HTML就像这样，

<div class="col-sm-6">

<table class="fixed-width">
   <tr>
      <th colspan=2>header 1</th>
   </tr>
   <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>
   </tr>
   <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>
   </tr>
   <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>
   </tr>
   <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>
   </tr>
</table>
</div>


<div class="col-sm-6">

<table class="fixed-width">
   <tr>
      <th colspan=2>header 234567895678657</th>
   </tr>
   <tr>
      <td>link 3</td>
      <td>link 4</td>
   </tr>
   <tr>
      <td>link 3</td>
      <td>link 4</td>
   </tr>
   <tr>
      <td>link 3</td>
      <td>link 4</td>
   </tr>
   <tr>
      <td>link 3</td>
      <td>link 4</td>
   </tr>
</table>

</div>

并将此css添加为

.col-sm-6{
  padding:0px
}

在较小的视图中折叠为标签或手风琴

Check this codepen by csstricks

Answer 4

除了其他答案之外，您还可以通过多种方式在移动/自适应视图中显示表格。您可以在此处查看responsive tables。

带HTML的移动响应表

4 个答案: