如何在大型设备中添加表格样式

Question

我为小型设备设计了表格样式，但是当我为大型设备设计样式时，小型设备显示的是对齐问题。我如何才能为大型设备定制表格？

我的CSS代码

.job-list {border:1px solid #eee; padding:0px 15px 15px 15px; background:#eee;} 
.single-job {width:100%; min-height:240px; background: #fff; padding:15px; margin-bottom:0px;} 
.single-job h3 {font-size:20px; font-weight:bold; font-family:arial; color:#434343; } 
.view_btn {padding: 8px 11px; color:#fff; background:#02bed4; border:none; margin-top:0px; float:left;} 
.view_btn:hover {background:#0095a6; text-decoration:none; color:#fff;} 
#first {margin-top:15px;} 
.table_heading {font-size:16px; font-weight:bold;} 
.table_details {font-size:15px;} 

响应表CSS代码

@media 
only screen and (max-width: 760px), 
(min-device-width: 768px) and (max-device-width: 1024px) { 

    /* Force table to not be like tables anymore */ 
    table, thead, tbody, th, td, tr { 
     display: block; 
    } 

    /* Hide table headers (but not display: none;, for accessibility) */ 
    thead tr { 
     position: absolute; 
     top: -9999px; 
     left: -9999px; 
    } 
    tr { border: 1px solid #ccc; } 

    td { 
     /* Behave like a "row" */ 

     border-bottom: 1px solid #eee; 
     position: relative; 
     padding-left:40%; 
     padding-bottom:4%; 

    } 

    td:before { 
     /* Now like a table header */ 
     position: absolute; 
     /* Top/left values mimic padding */ 
     top: 6px; 
     left: 6px; 
     width: 45%; 
     padding-right: 0px; 
     white-space: nowrap; 
    } 

    /* 
    Label the data 
    */ 
    td:nth-of-type(1):before { content: "Profile :"; color:#a94442; font-weight:bold; } 
    td:nth-of-type(2):before { content: "Company :"; color:#a94442; font-weight:bold; } 
    td:nth-of-type(3):before { content: "Interview :"; color:#a94442; font-weight:bold; } 
    td:nth-of-type(4):before { content: "Location :"; color:#a94442; font-weight:bold; } 

} 

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
    body { 
     padding: 0; 
     margin: 0; 
     width: 320px; } 
    } 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
    body { 
     width: 495px; 
    } 
} 

我的HTML代码

<div class="row"> 
<div class="col-md-9"> 
<div class="job-list"> 
    <div class="single-job" id="first"> 
     <h3>Balancing Technician</h3> 
     <table class="my-table"> 
     <thead> 
     <tr class="table_heading"> 
      <th class="text-danger">Profile</th> 
      <th class="text-danger">Company </th> 
      <th class="text-danger">Interview</th> 
      <th class="text-danger">Location</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr class="table_details"> 
      <td>Age 22 - 45 Should Have Minimum 3 Years Exp</td> 
      <td>Adams Ship Building And Repairs </td> 
      <td>23/05/2016</td> 
      <td>Dubai, United Arab Emirates</td> 
     </tr> 
     </tbody> 
     </table> 
     <a href="#" class="view_btn">View this Job</a> 
    </div> 
</div> 

<div class="job-list"> 
    <div class="single-job"> 
     <h3>Balancing Technician</h3> 
     <table class="my-table"> 
     <thead> 
     <tr class="table_heading"> 
      <th class="text-danger">Profile</th> 
      <th class="text-danger">Company </th> 
      <th class="text-danger">Interview</th> 
      <th class="text-danger">Location</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr class="table_details"> 
      <td>Age 22 - 45 Should Have Minimum 3 Years Exp</td> 
      <td>Adams Ship Building And Repairs </td> 
      <td>23/05/2016</td> 
      <td>Dubai, United Arab Emirates</td> 
     </tr> 
     </tbody> 
     </table> 
     <a href="#" class="view_btn">View this Job</a> 
    </div> 
</div> 
</div><!--end of col-md-9--> 

<div class="col-md-3"> 
<div class="sidebar"> 
    <span class="single_title">Industries We Serve <hr align="left"></span> 
    <ul class="industry-list"> 
     <li>Lorem</li> 
     <li>Ipsum</li> 
     <li>Dolor</li> 
     <li>Sit</li> 
     <li>Amet</li> 
    </ul> 
</div> 
</div><!--end of col-md-3--> 
</div><!--end of row--> 

Answer 1

请与该媒体查询@media screen and (min-width:768px){...}只反映大型设备

尝试