cari

Rumah >hujung hadapan web >tutorial css >caption-side属性怎么用

caption-side属性怎么用

青灯夜游
青灯夜游asal
2019-02-16 11:40:163548semak imbas

caption-side属性用来设置表格标题的位置，可以设置表格标题是位于表格的上面，还是下面。

caption-side属性怎么用

CSS caption-side属性

作用：caption-side属性设置表格标题的位置。

语法：

caption-side: top|bottom;

参数：

top：默认值，把表格标题定位在表格之上。

bottom：把表格标题定位在表格之下。

说明：所有主流浏览器都支持caption-side属性；但IE8只有指定!DOCTYPE才支持caption-side属性。

CSS caption-side属性的使用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
td{
  padding:10px 20px;
}
#example1 {
  caption-side: bottom;
}

#example2 {
  caption-side: top;
}
</style>
</head>
<body>


<h2>caption-side: bottom:</h2>
<table id="example1" border="1">
<caption>标题</caption>

<tr>
  <td>测试文本</td>
  <td>测试文本</td>
  <td>测试文本</td>
</tr>
<tr>
  <td>测试文本</td>
  <td>测试文本</td>
  <td>测试文本</td>
</tr><tr>
  <td>测试文本</td>
  <td>测试文本</td>
  <td>测试文本</td>
</tr><tr>
  <td>测试文本</td>
  <td>测试文本</td>
  <td>测试文本</td>
</tr><tr>
  <td>测试文本</td>
  <td>测试文本</td>
  <td>测试文本</td>
</tr>
</table>

<h2>caption-side: top (默认值):</h2>
<table id="example2" border="1">
<caption>标题2</caption>
<tr>
  <td>测试文本</td>
  <td>测试文本</td>
  <td>测试文本</td>
</tr>
<tr>
  <td>测试文本</td>
  <td>测试文本</td>
  <td>测试文本</td>
</tr><tr>
  <td>测试文本</td>
  <td>测试文本</td>
  <td>测试文本</td>
</tr><tr>
  <td>测试文本</td>
  <td>测试文本</td>
  <td>测试文本</td>
</tr><tr>
  <td>测试文本</td>
  <td>测试文本</td>
  <td>测试文本</td>
</tr>
</table>
</body>
</html>

效果图：

3.jpg

Atas ialah kandungan terperinci caption-side属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css align-items属性怎么用？Artikel seterusnya：column-count属性怎么用

Artikel berkaitan

Lihat lagi