css設(shè)置表格樣式的方法

發(fā)布時(shí)間：2020-09-24 11:20:25 來源：億速云閱讀：177 作者：小新欄目：web開發(fā)

這篇文章主要介紹css設(shè)置表格樣式的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

1、一個(gè)簡單的表格
table.html

<!doctype html><html><head>
    <meta charset="utf-8">
    <title>表格樣式</title>
    <link href="box.css" type="text/css" rel="stylesheet"></head><body>
  <center>
  <table class="class">
      <caption>課程表</caption>
        <tr>
            <th>星期\課程</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
      </tr>
      <tr>
            <th>1-2節(jié)</th>
            <td>數(shù)學(xué)</td>
            <td>語文</td>
            <td>化學(xué)</td>
            <td>英語</td>
             <td>英語</td>
      </tr>

      <tr>
            <th>3-4節(jié)</th>
            <td>英語</td>
            <td>物理</td>
            <td>化學(xué)</td>
            <td>英語</td>
             <td>體育</td>
      </tr>

      <tr>
            <th>5-6節(jié)</th>
            <td>數(shù)學(xué)</td>
            <td>物理</td>
            <td>體育</td>
            <td>化學(xué)</td>
            <td>美術(shù)</td>
      </tr>

      <tr>
            <th>7-8節(jié)</th>
            <td>數(shù)學(xué)</td>
            <td>美術(shù)</td>
            <td>化學(xué)</td>
            <td>英語</td>
            <td>體育</td>
      </tr>
      <tr>
            <th>9-10節(jié)</th>
            <td>生物</td>
            <td>美術(shù)</td>
            <td>生物</td>
            <td>英語</td>
            <td>物理</td>
      </tr>
    </table>
  </center>
  </body></html>

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;
    }

2、邊框合并：boder-collapse
屬性值：
separate;（分開，默認(rèn)）
collapse;（合并）

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:collapse;
    }

3、邊框間距border-spacing(前提是：border-collapse:separate;)

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:separate;    
    border-spacing: 45px;
    }

4、設(shè)置表格標(biāo)題的位置caption-side
屬性值：
top;//默認(rèn)
bottom;
left;
right;

table.css

table,td,th{
    border:1px solid #aaa;    
    font-size: 23px;    
    border-collapse:separate;    
    border-spacing: 45px;    
    caption-side:bottom;
    }

5、當(dāng)單元格對(duì)象寬度超過單元格所定義的寬度時(shí)，可用table-layout：fixed保持表格寬度不被改變
屬性值：auto(默認(rèn))
fixed(寬度固定)
table.css

table,td,th{
    border:1px solid #aaa;
        font-size: 23px;    
        border-collapse:separate;    
        border-spacing: 5px;    
        table-layout: fixed;    
        caption-side:top;
        }

以上是css設(shè)置表格樣式的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

css設(shè)置表格樣式的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽