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

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){...} 仅反射(reflect)大型设备