Fatal编程技术网
  • html/
  • Html 带有侧割台响应解决方案的桌子

Html 带有侧割台响应解决方案的桌子

html css angularjs

Html 带有侧割台响应解决方案的桌子,html,css,angularjs,html-table,Html,Css,Angularjs,Html Table,大家好，有谁能提出一个更好的解决方案，让这个桌子结构在移动设备上具有响应性和可滑动性。我正在研究角度ng刷卡，但在我可以刷卡之前，需要先让表在卡视图中做出响应。但是我不知道如何在移动视图上构建这个表 职位名称 网络开发者 Java开发者 销售跟单 项目经理 薪水 &磅；25000-30000 &磅；25000-30000 &磅；25000-30000 &磅；25000-30000 工作类型 永久的 合同 永久的 永久的 位置 伦敦市中心 伦敦，维多利亚 布雷克内尔 伦敦市中心 你可以这样试试

大家好，有谁能提出一个更好的解决方案，让这个桌子结构在移动设备上具有响应性和可滑动性。我正在研究角度ng刷卡，但在我可以刷卡之前，需要先让表在卡视图中做出响应。但是我不知道如何在移动视图上构建这个表


职位名称
网络开发者
Java开发者
销售跟单
项目经理
薪水
&磅；25000-30000
&磅；25000-30000
&磅；25000-30000
&磅；25000-30000
工作类型
永久的
合同
永久的
永久的
位置
伦敦市中心
伦敦，维多利亚
布雷克内尔
伦敦市中心
你可以这样试试-

@介质（最大宽度：768px）{
.包裹{
溢出：自动；
}
.包桌子{
宽度：768px；
}
}

职位名称
网络开发者
Java开发者
销售跟单
项目经理
薪水
&磅；25000-30000
&磅；25000-30000
&磅；25000-30000
&磅；25000-30000
工作类型
永久的
合同
永久的
永久的
位置
伦敦市中心
伦敦，维多利亚
布雷克内尔
伦敦市中心
你可以这样试试-

@介质（最大宽度：768px）{
.包裹{
溢出：自动；
}
.包桌子{
宽度：768px；
}
}

职位名称
网络开发者
Java开发者
销售跟单
项目经理
薪水
&磅；25000-30000
&磅；25000-30000
&磅；25000-30000
&磅；25000-30000
工作类型
永久的
合同
永久的
永久的
位置
伦敦市中心
伦敦，维多利亚
布雷克内尔
伦敦市中心
我将表格结构更改为较小屏幕的平铺布局。

调整大小以看到神奇的发生

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>


职位名称
薪水
工作类型
位置
工作标题Web开发人员
工资&英镑；25000-30000
工作类型永久性
地点：伦敦市中心
工作标题Java开发人员
工资&英镑；25000-30000
工作类型永久性
地点：维多利亚州伦敦
工作标题执行
工资&英镑；25000-30000  
工作类型合同
布雷克内尔酒店
职位项目经理
工资&英镑；25000-30000
工作类型永久性
地点：伦敦市中心
我将表格结构更改为较小屏幕的平铺布局。

调整大小以看到神奇的发生

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>


职位名称
薪水
工作类型
位置
工作标题Web开发人员
工资&英镑；25000-30000
工作类型永久性
地点：伦敦市中心
工作标题Java开发人员
工资&英镑；25000-30000
工作类型永久性
地点：维多利亚州伦敦
工作标题执行
工资&英镑；25000-30000  
工作类型合同
布雷克内尔酒店
职位项目经理
工资&英镑；25000-30000
工作类型永久性
地点：伦敦市中心
这并不是我真正想要的，我想在mobile中使用类似的东西，但这一个的结构是标准的“header top”，这也可以实现，但您需要重新构建数据以适应需要。请参见上面的编辑！这并不是我真正想要的，我在移动设备上想要这样的东西，但这一个的结构是标准的“页眉顶部”，这也可以实现，但你需要重新调整你的数据以适应。请参见上面的编辑！