Question

我需要有关响应表的帮助。所需要的是在调整大小时基本上将其更改为“移动版本”，但移动版本与其主要样式略有不同，如图所示。

enter image description here

HTML：

 <table class="crafting">

    <thead>
    <tr>
    <th style="width:15%">Name</th>
    <th style="width:20%">Ingredients</th>
    <th style="width:205px;">Input &gt; Output</th>
    <th>Description</th>
    </tr>
    </thead>

    <tbody>

    <tr>
    <td>Ore Blocks</td>
    <td>Gold Ingots, Iron Ingots, Diamonds and Lapis Lazuli Dye</td>
    <td><img width="204" height="112" title="Crafting Ore Blocks" src="http://www.minecraftxl.com/images/crafting/Crafting-Ore-Blocks1.gif" alt="Crafting Ore Blocs from Ingots" /></td>
    <td>Turn ingots or diamonds into a placeable block. Can be used for storage or to show off.</td>
    </tr>

    </tbody>
    </table>

CSS：

        td {
        border:0;
        }

        table.crafting {
            border-spacing:0;
            border-collapse:collapse;
        }
        .crafting th {
            border:2px solid #f3f3f3;
            padding:5px;
        }
        .crafting td {
            border:2px solid #f3f3f3;
            padding:5px;
            vertical-align:top;
        }
        .crafting tr {
            background:#c6c6c6;
        }
        .crafting-name {
            font-weight:bold;
            border-bottom:0 !important;
            background:#c6c6c6;
        }
        .crafting-ingredients {
            border-top:0 !important;
            border-bottom:0 !important;
            background:#bcbcbc;
        }
        .crafting-img {
            width:205px;
            border-bottom:0 !important;
            border-top:0 !important;
            background:#c6c6c6;
        }
        .crafting-desc {
            border-top:0 !important;
            background:#bcbcbc;
        }

Answer 1

如果您不反对更改HTML的整体格式，我有一个可能更容易处理的解决方案......

如果将当前表结构更改为一系列div元素，则可以将每个表行嵌套到容器div中。

我会给你一个“行”的例子：

<div class="tableRow">
<div class="columnOne"> content </div>
<div class="columnTwo"> content </div>
<div class="columnThree"> content </div>
<div class="columnFour"> content </div>
</div>

然后，使用CSS，您可以设置.tableRow {width: 100%}。从这里，您可以根据需要设置列宽。从您的示例中，您可以执行以下操作：

.columnOne {width: 10%; float: left;}
.columnTwo {width: 15%; float: left;}
.columnThree {width: 30%; float: left;}
.columnFour {width: 45%; float: left;}

然后，当您使用@media query到达移动视图断点时，您可以执行以下操作：

.columnOne, .columnTwo, .columnThree, .columnFour {width: 100%}

这将使列有效地成为width: 100%的行。

Answer 2

选项1：

完整的表格

http://jsfiddle.net/2655u/

选项2

在使用的媒体查询中将表转换为div

<强> HTML

<div class="title">
    <div class="name">Name</div>
    <div class="ingredients">Ingredients</div>
    <div class="field">Input &gt; Output</div>
    <div class="description">Description</div>
</div>
<div class="responsive">
    <div class="name">Ore Blocks</div>
    <div class="ingredients">Gold Ingots, Iron Ingots, Diamonds and Lapis Lazuli Dye</div>
    <div class="field">
        <img width="204" height="112" title="Crafting Ore Blocks" src="http://www.minecraftxl.com/images/crafting/Crafting-Ore-Blocks1.gif" alt="Crafting Ore Blocs from Ingots" />
    </div>
    <div class="description">Turn ingots or diamonds into a placeable block. Can be used for storage or to show off.</div>
</div>

<强> CSS

div {
    display: table;
    width: 100%;
    table-layout: fixed;
}
div > div {
    display: table-cell;
    background : #C6C6C6;
    border:2px solid #f3f3f3;
    padding:5px;
    vertical-align : top;
}
div.title {
    text-align : center;
    font-weight:bold;
}
div.name {
    width : 90px;
}
div.ingredients {
    width : 150px;
}
div.field {
    width : 205px;
}

@media only screen and (max-width: 767px) {
    .title {display:none;}
    .responsive div {
        display : block;
        width : auto;
        text-align : center;
        background : white;
    }
    .responsive div.ingredients {background : #C6C6C6;}
    .responsive div.description {background : #C6C6C6;}
}

示例：http://jsfiddle.net/2DTSG/

Answer 3

嗯，我也在寻找同一天。得到以下。它遵循相同的方法，在较小的设备中查看时将列转换为行。

http://css-tricks.com/responsive-data-tables/

在继续前进之前，请参阅 Live Demo

Answer 4

一个简单的解决方案是拥有两个表：常规表（具有类full）和移动表（具有类mobile）。然后，您可以使用媒体查询在特定屏幕大小之间切换它们。

如果您的网站不是特别沉重，这种方法可以省去很多麻烦。

示例小提琴：http://jsfiddle.net/QDrPb/

.mobile {
    display:none;
}

@media (max-width:767px) {
    .full {
        display:none;
    }
   .mobile {
       display:block;
    }
}

Answer 5

Twitter Bootstrap是一个很好的事情来实现表响应。

http://getbootstrap.com/

您必须从上面的链接下载并添加css文件。

之后，请像这样申请：http://getbootstrap.com/css/#tables-responsive

我希望这可能有助于你的需要。

由于

Answer 6

这里简单的演示请为纯css demo fiddle

提供此链接

var table = $('#example').DataTable({
 data: data,
 columns: [
   { data: "id", title: 'id' },
   { data: "name", title: 'name' },
   { data: "firstname", title: 'firstname' },
   { data: "company", title: 'company' },
   { data: null, 
     title: 'combined',
     render: function(data, type, full) {
       return 'The id of '+full.firstname+' '+full.name+' is '+full.id
     }
   } 
 ]
})

/*by Ñ££¿ Upadhyay*/
body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}
table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;a
  width: 100%;
  table-layout: fixed;
}
table caption {
  font-size: 18px;
  margin: 10px;
}
table tr {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: 10px;
}
table th,
table td {
  padding: 10px;
  text-align: center;
}
table th {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: uppercase;
}
@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table caption {
    font-size: 14px;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: 5px;
  }
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: 14px;
    text-align: right;
  }
  table td:before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
    padding-right: 70px;
  }
  table td:last-child {
    border-bottom: 0;
  }
}

Answer 7

响应式表格 JavaScript 插件

<link rel="stylesheet" href=".../dist/css/table-fluid.css"/>
<script src=".../dist/js/table-fluid.js"></script>

<table class="table-fluid">
  <thead>
  ...
  </thead>
  <tbody>
  ...
  </tbody>
</table>

使用 JavaScript 函数

window.tableFluid('.table-fluid');

https://www.npmjs.com/package/table-fluid

https://github.com/maestro888/table-fluid

Answer 8

表格单元格无法按照您想要的方式重新排列 - 行和列已锁定且无法浮动。您所能做的就是在每个单元格中更改布局。你需要完全改变你的标记才能实现这一点。

响应表

8 个答案: