如何在 Chrome 中覆盖用户代理样式表并正确显示我的设计

Posted 2023-03-05

【中文标题】如何在 Chrome 中覆盖用户代理样式表并正确显示我的设计

【英文标题】：How to override user agent stylesheet in Chrome and show my design Correctly

【发布时间】：2016-04-17 23:52:03

【问题描述】：

我的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;
        

【参考方案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>