Heim > Artikel > Web-Frontend > Wie lege ich den Tabellenstil mit CSS fest? So legen Sie den Tabellenstil mit CSS fest
Wie lege ich den Tabellenstil mit CSS fest? So legen Sie den Tabellenstil mit CSS fest
- 不言Original
- 2018-08-18 14:16:105464Durchsuche
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>table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
}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;
}3. Randabstand (Voraussetzung: border-collapse:separate;)
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:separate;
border-spacing: 45px;
}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;
}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;
}Verwandte Empfehlungen:
CSS-Steuertabelle style_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!