如何在Chrome中覆蓋用戶代理樣式表並正確顯示我的設計

Question

我的table設計在Firefox中可以正確顯示，但由於用戶代理樣式表，它在chrome中無法正確顯示，並且我的代碼沒有覆蓋chrome的默認樣式，我該怎么做呢？

<table class="mytable-responsive">
    <thead>
        <tr>
            <th>Name</th>
            <th>family</th>
            <th>date</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>juli</td>
            <td>2015/3/3</td>
            <td>California</td>                         
        </tr>
    </tbody>
</table>

樣式表

.mytable-responsive {
    width: 100%;
    border-collapse: collapse;
}
@media screen and (max-width:992px) {
    .mytable-responsive thead th{
        display:block;
        border:none;
    }
    .mytable-responsive tbody tr td {
        display: block;
        border:none;
    }    
}

Answer 1

您必須給!important覆蓋代碼

使用此代碼

 .mytable-responsive { width: 100% !important; border-collapse: collapse !important; } @media screen and (max-width:992px) { .mytable-responsive thead th{ display:block !important; border:none !important; } .mytable-responsive tbody tr td { display: block !important; border:none !important; } } 

  <table class="mytable-responsive"> <thead> <tr> <th>Name</th> <th>family</th> <th>date</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>juli</td> <td>2015/3/3</td> <td>California</td> </tr> </tbody> </table>