Question

我有一个包含超过8列的表，我想在不使用Javascript / jQuery / bootstrap的情况下做出响应。

我想知道它在移动视图中的外观。我不想要代码视图说明。

我还根据超过4列进行排序。

body{
 font-family: arial, sans-serif;
 font-size:12px
}
.text-to-right {
    text-align: right;
  }
  .text-to-left {
    text-align: left;
    padding-left: 1rem;
  }
  table {
    width: 100%;
    border-left: 1px solid #f3f1f1;
    border-bottom: 1px solid #f3f1f1fa;
    border-spacing: 0;
  }
  .table-bordered > tbody > tr > td,
  .table-bordered > tbody > tr > th,
  .table-bordered > tfoot > tr > td,
  .table-bordered > tfoot > tr > th,
  .table-bordered > thead > tr > td,
  .table-bordered > thead > tr > th {
    border-left: 1px solid #f3f1f1;
    border-bottom: 1px solid #d2cecefa;
    /*box-shadow: 0 2px 4px 0 rgba(241, 230, 230, 0.16), 0 2px 10px 0 rgba(247, 245, 245, 0.12);*/
    box-shadow: 0 1px 1px 0 #f3f1f1,0 1px 1px 0 #f3f1f1;
  }
  .table-bordered > tbody > tr > td:first-child,
  .table-bordered > tbody > tr > th:first-child,
  .table-bordered > tfoot > tr > td:first-child,
  .table-bordered > tfoot > tr > th:first-child,
  .table-bordered > thead > tr > td:first-child,
  .table-bordered > thead > tr > th:first-child {
    border-left-width: 0;
  }
  .table-bordered tbody tr td:last-child,.table-bordered thead tr th:last-child {  
    border-right: 1px solid #f3f1f1;;
  }
  .table-bordered > thead > th:last-child {
    border-right: 1px solid #f3f1f1;
  }
  th {
    padding: 1rem 0;
    background: #192b4b;
    color: #fff;
    font-size: 1.3rem;
    font-weight: normal;
    border-left: 1px solid #f3f1f1;
  }
  td {  
    padding: 1rem;
    text-transform: capitalize;
    color: #6b5e5e;
  }
  
  .table-bright-data {
    color: #007dc5;
    font-size: 1.8rem;
    font-family: 'Roboto Condensed', Arial, sans-serif;
  }

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table class="table-bordered">
    <thead>
        <tr>
            <th width="05%">
               S.No
            </th>
            <th class="text-to-left" width="23%">Name</th>
            <th width="10%">Code</th>
            <th width="12%">Type</th>
            <th width="10%"> Profile</th>
            <th width="13%">Time</th>
            <th width="10%">Size</th>
            <th width="11%">Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="align-center">
                1
            </td>
            <td class="text-to-left table-bright-data">Responsive layout</td>
            <td class="text-to-left">LDHSNSJ734674</td>
            <td class="text-to-left">Fixed Interest </td>
            <td class="text-to-left">high </td>
            <td class="text-to-right">No minimum </td>
            <td class="text-to-right">0 </td>
            <td class="text-to-right">05-Dec-2001 </td>
        </tr>
        <tr>
            <td class="align-center">
                2
            </td>
            <td class="text-to-left table-bright-data">Responsive layout</td>
            <td class="text-to-left">DHEYE933</td>
            <td class="text-to-left">Responsive layout </td>
            <td class="text-to-left"> </td>
            <td class="text-to-right">No minimum </td>
            <td class="text-to-right">0 </td>
            <td class="text-to-right">05-Dec-2001 </td>
        </tr>       
    </tbody>
</table>

</body>
</html>

Answer 1

你可以像这样折叠一个表

CSS

@media (max-width: 1024px) {
    .collapse {
        display: block;
    }}

HTML

<td class="collapse">
  Content
</td>
<td class="collapse">
  Content
</td>

我会添加多个具有不同@media (max-width: xxx)的类，以便它们不会同时崩溃。你想如何崩溃它们，以及你应该以什么样的顺序来弄清楚自己。如果您有任何其他问题，可以查看Javadoc。

我个人喜欢在桌子上使用div，例如：https://css-tricks.com/responsive-data-tables/

在不使用jQuery或Javascript的情况下使html表响应

1 个答案: