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

Question

我對table設計在Firefox中顯示正確，但它不會在因爲用戶代理樣式表的鍍鉻正確顯示和我的代碼不會覆蓋到的默認樣式鉻我怎麼能做得好？

<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>