文字
分享

语法:

caption-side:top | bottom

默认值top

适用于:table系元素

继承性:无

动画性:否

计算值:指定值

取值:

  • top:指定caption在表格上边

  • bottom:指定caption在表格下边

说明:

设置或检索表格的caption对象是在表格的那一边。
  • 要在IE7及以下浏览器中实现top与bottom参数值的效果,可直接在caption标签内定义标签属性valign为top和bottom。

  • Firefox还额外支持right和left两个非标准值

  • 对应的脚本特性为captionSide

兼容性:

ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
Basic Support6.0-7.02.0+4.0+6.0+15.0+6.0+2.1+18.0+
8.0+

示例:

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>caption-side_CSS参考手册_web前端开发参考手册系列</title>

<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />

<style>

h1{font-size:16px;font-family:Arial;}

.test1{caption-side:top;}

.test2{caption-side:right;}

.test3{caption-side:bottom;}

.test4{caption-side:left;}

</style>

</head>

<body>

<h1>caption在上边</h1>

<table border="1" class="test1">

<caption>caption在上边</caption>

<tbody>

    <tr>

        <td>这是某一单元格</td>

        <td>这是某一单元格</td>

    </tr>

    <tr>

        <td>这是某一单元格</td>

        <td>这是某一单元格</td>

    </tr>

</tbody>

</table>

 

<h1>caption在右边</h1>

<table border="1" class="test2">

<caption>caption在右边</caption>

<tbody>

    <tr>

        <td>这是某一单元格</td>

        <td>这是某一单元格</td>

    </tr>

    <tr>

        <td>这是某一单元格</td>

        <td>这是某一单元格</td>

    </tr>

</tbody>

</table>

 

<h1>caption在下边</h1>

<table border="1" class="test3">

<caption>caption在下边</caption>

<tbody>

    <tr>

        <td>这是某一单元格</td>

        <td>这是某一单元格</td>

    </tr>

    <tr>

        <td>这是某一单元格</td>

        <td>这是某一单元格</td>

    </tr>

</tbody>

</table>

 

<h1>caption在左边</h1>

<table border="1" class="test4">

<caption>caption在左边</caption>

<tbody>

    <tr>

        <td>这是某一单元格</td>

        <td>这是某一单元格</td>

    </tr>

    <tr>

        <td>这是某一单元格</td>

        <td>这是某一单元格</td>

    </tr>

</tbody>

</table>

</body>

</html>

            


运行实例 »

点击 "运行实例" 按钮查看在线实例

上一篇:border-spacing下一篇:empty-cells