HTML table 边框双线变单线

2022-05-01

阅读 2 分钟

效果对比图

普通table 标签

<table border="1">
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
      </table>

加了css限制的

    <table>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>

table{
    border-collapse:collapse;
    border-spacing:0;
    border-left:1px solid #888;
    border-top:1px solid #888;
}  

th,td{
    border-right:1px solid #888;
    border-bottom:1px solid #888;
    padding:5px 15px;
}  

th{
    font-weight:bold;
}