带有侧标题响应解决方案的表格

Question

您好，任何人都可以提出更好的解决方案，以使此表格结构在移动设备上具有响应性和可滑动性。我正在查看角度 ng-swipe，但需要先让表格在卡片视图中做出响应，然后才能进行滑动操作。但我不知道如何在移动视图上构建此表。

http://jsfiddle.net/e3nk137y/3069/

<table class="table table-striped">
                    <tbody>
                        <tr>
                            <th>Job title</th>
                            <td>Web Developer</td>
                            <td>Java Developer</td>
                            <td>Sales Excutive</td>
                            <td>Project Manager</td>
                        </tr>
                        <tr>
                            <th>Salary</th>
                            <td>&pound; 25000-30000</td>
                            <td>&pound; 25000-30000</td>
                            <td>&pound; 25000-30000</td>
                            <td>&pound; 25000-30000</td>
                        </tr>
                        <tr>
                            <th>Job Type</th>
                            <td>Permanent</td>
                            <td>Contract</td>
                            <td>Permanent</td>
                            <td>Permanent</td>
                        </tr>
                        <tr>
                            <th>Location</th>
                            <td>Central London</td>
                            <td>London, Victoria</td>
                            <td>Bracknell</td>
                            <td>Central London</td>
                        </tr>
                    </tbody>
                </table>

Answer 1

我将表格结构更改为小屏幕的平铺布局。

DEMO JSFIDDLE

调整大小以见证奇迹发生。

CSS

.Lbl{display:none;}

@media all and (max-width:750px){
    table.table{
        border-collapse:separate !important;
        border-spacing:0 10px !important;
    }
    .table thead,
    .table th{
        display:none;
    }
    .Lbl{
        display:inline-block;
        float:left;
        height:100%;
        width:35%;
        padding-right:10px;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .table td{
        clear:left;
        float:left;
        height:auto;
        min-height:30px;
        width:100% !important;
        background:#EEE;
    }
    .table tbody > tr td{
        border-left:1px solid #DDD;
        border-right:1px solid #DDD;
    }
    .table tbody > tr td:first-of-type{
        border-top:1px solid #DDD;
    }
    .table tbody > tr td:last-of-type{
        border-bottom:1px solid #DDD;
    }
    .table tbody > tr:hover{
        background:rgba(16,107,186,0.2);
    }
    .table tbody > tr:hover td,
    .table tbody > tr:hover .Col,
    .table tbody > tr:hover .Col2{
        border-left:1px solid #70AADD;
        border-right:1px solid #70AADD;
    }
    .table tbody > tr:hover td:first-of-type{
        border-top:1px solid #70AADD;
    }
    .table tbody > tr:hover td:last-of-type{
        border-bottom:1px solid #70AADD;
    }
}

HTML

<table class="table table-striped">
    <thead>
        <th>Job title</th>
        <th>Salary</th>
        <th>Job Type</th>
        <th>Location</th>
    </thead>
    <tbody>
        <tr>            
            <td><div class="Lbl">Job title</div>Web Developer</td>
            <td><div class="Lbl">Salary</div>&pound; 25000-30000</td>
            <td><div class="Lbl">Job Type</div>Permanent</td>
            <td><div class="Lbl">Location</div>Central London</td>
        </tr>
        <tr>            
            <td><div class="Lbl">Job title</div>Java Developer</td>
            <td><div class="Lbl">Salary</div>&pound; 25000-30000</td>
            <td><div class="Lbl">Job Type</div>Permanent</td>
            <td><div class="Lbl">Location</div>London, Victoria</td>            
        </tr>
        <tr>            
            <td><div class="Lbl">Job title</div>Sales Excutive</td>
            <td><div class="Lbl">Salary</div>&pound; 25000-30000</td>  
            <td><div class="Lbl">Job Type</div>Contract</td>            
            <td><div class="Lbl">Location</div>Bracknell</td>                          
        </tr>
        <tr>            
            <td><div class="Lbl">Job title</div>Project Manager</td>
            <td><div class="Lbl">Salary</div>&pound; 25000-30000</td>
            <td><div class="Lbl">Job Type</div>Permanent</td>
            <td><div class="Lbl">Location</div>Central London</td>
        </tr>
    </tbody>
</table>

Answer 2

你可以这样试试-

@media (max-width: 768px) {
  .wrap {
    overflow: auto;
  }
  .wrap table {
    width: 768px;
  }
}

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

<div class="wrap">
  <table class="table table-striped">
    <tbody>
      <tr>
        <th>Job title</th>
        <td>Web Developer</td>
        <td>Java Developer</td>
        <td>Sales Excutive</td>
        <td>Project Manager</td>
      </tr>
      <tr>
        <th>Salary</th>
        <td>&pound; 25000-30000</td>
        <td>&pound; 25000-30000</td>
        <td>&pound; 25000-30000</td>
        <td>&pound; 25000-30000</td>
      </tr>
      <tr>
        <th>Job Type</th>
        <td>Permanent</td>
        <td>Contract</td>
        <td>Permanent</td>
        <td>Permanent</td>
      </tr>
      <tr>
        <th>Location</th>
        <td>Central London</td>
        <td>London, Victoria</td>
        <td>Bracknell</td>
        <td>Central London</td>
      </tr>
    </tbody>
  </table>
</div>