Wie lege ich den Tabellenstil mit CSS fest? So legen Sie den Tabellenstil mit CSS fest-CSS-Tutorial-php.cn

Wie lege ich den Tabellenstil mit CSS fest? So legen Sie den Tabellenstil mit CSS fest

不言

Freigeben： 2018-08-18 14:16:10

Original

5540 Leute haben es durchsucht

Eine einfache Tabelle fühlt sich manchmal eintönig an. Wie fügt man einer CSS-Tabelle Stile hinzu? In diesem Artikel erfahren Sie, wie Sie den CSS-Tabellenstil festlegen.

1. Eine einfache Tabelle
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节</th>
            <td>数学</td>
            <td>语文</td>
            <td>化学</td>
            <td>英语</td>
             <td>英语</td>
      </tr>

      <tr>
            <th>3-4节</th>
            <td>英语</td>
            <td>物理</td>
            <td>化学</td>
            <td>英语</td>
             <td>体育</td>
      </tr>

      <tr>
            <th>5-6节</th>
            <td>数学</td>
            <td>物理</td>
            <td>体育</td>
            <td>化学</td>
            <td>美术</td>
      </tr>

      <tr>
            <th>7-8节</th>
            <td>数学</td>
            <td>美术</td>
            <td>化学</td>
            <td>英语</td>
            <td>体育</td>
      </tr>
      <tr>
            <th>9-10节</th>
            <td>生物</td>
            <td>美术</td>
            <td>生物</td>
            <td>英语</td>
            <td>物理</td>
      </tr>
    </table>
  </center>
  </body></html>

Nach dem Login kopieren

table.css

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

Nach dem Login kopieren

2. Border Merge : boder-collapse
Attributwert:
separate; (separate, default)
collapse; (merge)

table.css

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

Nach dem Login kopieren

3. Randabstand (Voraussetzung: border-collapse:separate;)

table.css

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

Nach dem Login kopieren

Legen Sie die Position der Tabellentitelbeschriftung fest
Attributwert:
top;//Standard
unten;
links;
right;

table.css

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

Nach dem Login kopieren

5. Wenn die Breite des Zellobjekts die durch die Zelle definierte Breite überschreitet, kann table-layout: Fixed verwendet werden, um die Tabelle beizubehalten Breite unverändert
Attributwert: auto (Standard)
fest (feste Breite)
table.css

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

Nach dem Login kopieren

Verwandte Empfehlungen:

CSS-Steuertabelle style_html/css_WEB-ITnose

Kompetent in CSS+DIV-Webseitenstil- und Layout-Einstellungsformularen und Tabellen_html/css_WEB-ITnose

Detaillierte Einführung in grundlegende CSS-Stiltabellen

Das obige ist der detaillierte Inhalt vonWie lege ich den Tabellenstil mit CSS fest? So legen Sie den Tabellenstil mit CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!