直接使用代码

图片素材

点击下载本素材所包含的图片，js文件

css代码

 <style>
.com-arctype-name2{margin:20px 0;color:#034b54;font-size:22px;font-weight: bold;letter-spacing: 1px;}
.com-table th,.com-table td{padding-left:30px!important;font-size:15px}
.com-table thead tr th{ background:url('http://www.bootfastui.cn/img/2021/0426-2/banner55.jpg'); color:#fff;line-height: 40px;;}
.com-table  tbody tr{line-height: 36px;background: #EBEFF1;}
.com-table  tbody tr:nth-child(2n){background: #E5E5E5;}
.com-table  td{line-height: 38px!important;}
.com-table  tbody tr:hover{background: #E5E5E5;}
</style>

HTML+JS代码

 
<div class="container">
  <h3 class="com-arctype-name2 " style="margin-top:-00px">质量管理体系</h3>
  <table class="table  table-bordered com-table">
    <thead>
      <tr>
        <th width='25%'>文档名称</th>
        <th width='40%'>标题</th>
        <th width='15%'>类型</th>
        <th width='20%'>日期</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a href="http://www.bootfastui.cn"><img src="http://www.bootfastui.cn/img/2021/0426-2/ico_pdf.png" alt="" width="25">
            TSS-Reach.pdf</a></td>
        <td>半导体放电管产品Reach认证报告</td>
        <td> Quality document</td>
        <td>2021-02-10</td>
      </tr>
      <tr>
        <td><a href="http://www.bootfastui.cn"><img src="http://www.bootfastui.cn/img/2021/0426-2/ico_pdf.png" alt="" width="25">
            TVS-RoHS.pdf</a></td>
        <td>TVS二极管产品RoHS认证报告</td>
        <td> Quality document</td>
        <td> 2021-02-10</td>
      </tr>
      <tr>
        <td><a href="http://www.bootfastui.cn"><img src="http://www.bootfastui.cn/img/2021/0426-2/ico_pdf.png" alt="" width="25">
            TVS-Reach.pdf</a></td>
        <td>TVS二极管产品Reach认证报告</td>
        <td> Quality document</td>
        <td> 2021-02-10</td>
      </tr>
    </tbody>
  </table>

</div>