html - 响应表

Question

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

我目前有这个：http: //jsfiddle.net/MLsZ8/

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

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

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

在继续前看现场演示

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

如果您不反对更改 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 4

Twitter Bootstrap实现表响应是一件好事。

http://getbootstrap.com/

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

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

我希望这可以帮助您的需要。

谢谢

Answer 5

一个简单的解决方案是有两张桌子：一张普通桌子（带有 class full）和一个移动表格（带有 class mobile）。然后，您可以使用媒体查询以特定屏幕尺寸在它们之间切换。

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

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

.mobile {
    display:none;
}

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

Answer 6

这里简单的演示请参考此链接以获取纯 css演示小提琴

/*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;
  }
}

<table>
  <caption>Statement Summary</caption>
  <thead>
    <tr>
      <th scope="col">Account</th>
      <th scope="col">Due Date</th>
      <th scope="col">Amount</th>
      <th scope="col">Period</th>
      <th scope="col">Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Account">Visa - 3412</td>
      <td data-label="Due Date">04/01/2016</td>
      <td data-label="Amount">$1,190</td>
      <td data-label="Period">03/01/2016 - 03/31/2016</td>
        <td data-label="Period">03/01/2016 - 03/31/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">Visa - 6076</td>
      <td data-label="Due Date">03/01/2016</td>
      <td data-label="Amount">$2,443</td>
      <td data-label="Period">02/01/2016 - 02/29/2016</td>
        <td data-label="Period">03/01/2016 - 03/31/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">Corporate AMEX</td>
      <td data-label="Due Date">03/01/2016</td>
      <td data-label="Amount">$1,181</td>
      <td data-label="Period">02/01/2016 - 02/29/2016</td>
        <td data-label="Period">03/01/2016 - 03/31/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Acount">Visa - 3412</td>
      <td data-label="Due Date">02/01/2016</td>
      <td data-label="Amount">$842</td>
      <td data-label="Period">01/01/2016 - 01/31/2016</td>
        <td data-label="Period">03/01/2016 - 03/31/2016</td>
    </tr>
  </tbody>
</table>

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

表格单元格无法按照您想要的方式重新排列 - 行和列被锁定并且不能浮动。您所能做的就是更改每个单元格内的布局。您将需要完全更改您的标记以实现这一目标。