CSS写表格样式的两种基本方式

Posted 2021-11-21 CSU迦叶

1. 方法一：利用html已有标签

效果

html代码

    <table border="2">
          <thead>
              <tr>
                  <td>标签</td>
                  <td>内容</td>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>SpongeBob</td>
              </tr>
          </tbody>
          <tfoot>
              <tr>
                  <td>2</td>
                  <td>Patrick Star</td>
              </tr>
          </tfoot>  
    </table>

 2. 方法二：html+less（vsc安装easy less插件可以根据.less自动生成.css）

效果

html代码

    <article class="table">
        <section>
            <ul>
                <li>标签</li>
                <li>内容</li>
            </ul>
        </section>
        <section>
            <ul>
                <li>1</li>
                <li>SpongeBob</li>
            </ul>
        </section>
        <section>
            <ul>
                <li>2</li>
                <li>Patrick Star</li>
            </ul>
        </section>
    </article>

 .less代码

.table{
    display: table;
    border: solid 2px black;
    padding: 3px;
    section {
        &:nth-of-type(1){
            display: table-header-group;
        }
        &:nth-of-type(2){
            display: table-footer-group;
        }
        &:nth-of-type(3){
            display: table-footer-group;
        }
      
        ul{
            display: table-row;
            
            li{
                display: table-cell;
                border: solid 1px black;
                padding: 2px;
            }
        }
    }
}