Wie kann ich Tabellenstil nur in großen Geräten hinzufügen

Question

Ich entwarf Tabellenformat für kleine Geräte, aber wenn ich für große Geräte style, werden Ausrichtungsprobleme für kleine Geräte angezeigt. Wie kann ich die Tabelle nur für große Geräte formatieren?

Mein CSS-Code

.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-Code Responsive Tabelle

@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; 
    } 
} 

Mein HTML-Code

<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

Bitte versuchen Sie es mit dieser Medienabfrage @media screen and (min-width:768px){...} die nur für große Geräte

reflektiert