响应表

  • Z时代
  • 2024-01-10
  • 分类：问答

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

我目前得到这个：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="/wp-content/uploads/new2022/20220327voicc/174153706.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; 
     }

回答：

表细胞无法重新安排他们你想要的方式 - 行列被锁定，不能浮动。你所能做的就是在每个单元格内改变布局。您将需要完全改变您的标记以实现此目的。

回答：

如果你不反对改变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，你可以做到以下几点：

​​

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

回答：

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

如果您的网站不是特别重，这是一个可以节省很多头痛的方法。

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

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

回答：

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

http://getbootstrap.com/

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

之后，应用这样的：http://getbootstrap.com/css/#tables-responsive

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

由于

回答：

选项1：

完整表

http://jsfiddle.net/2655u/

选项2

转换表中所用mediaqueries

HTML到的div

<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="/wp-content/uploads/new2022/20220327voicc/174153706.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/

回答：

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

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

向前迈进之前看到Live Demo

回答：

在这里简单的演示，请reffer此链接，纯CSS demo fiddle

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

以上是 响应表 的全部内容， 来源链接： utcz.com/qa/258632.html

回到顶部