本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > css >

收藏
分享到

CSS合并单元格四种方式示例介绍(table/display/flex/grid)

css 来源：互联网 作者：佚名 发布时间：2024-02-29 22:00:59 人浏览
摘要

效果图： 方式一：table【最简单写法】 colspan：规定单元格可横跨的列数。 rowspan：规定单元格可横跨的行数。 通过table的colspan和rowspan轻松实现单元格合并。 边框设置：th/td 加右下边框，tab

效果图：

方式一：table【最简单写法】

  • colspan：规定单元格可横跨的列数。
  • rowspan：规定单元格可横跨的行数。

通过table的colspan和rowspan轻松实现单元格合并。

边框设置：th/td 加右下边框，table加左上边框。

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

<!--html-->

<table border="0" cellspacing="0" cellpadding="0">

  <tr>

    <th style="width: 100px;">种类</th>

    <th style="width: 100px;">名称</th>

    <th>描述</th>

  </tr>

  <tr>

    <td rowspan="2">水果</td>

    <td>香蕉</td>

    <td>香蕉（学名：Musa nana Lour.）是芭蕉科、芭蕉属植物。植株丛生，具匐匍茎，矮型的高3.5米以下，一般高不及2米...</td>

  </tr>

  <tr>

    <td>苹果</td>

    <td>苹果（Malus pumila Mill.），是落叶乔木，通常树木可高至15米，但栽培树木一般只高3-5米左右...</td>

  </tr>

  <tr>

    <td colspan="2">其他</td>

    <td>--</td>

  </tr>

</table>

<!--css-->

<style>

  table {

    width: 600px;

    table-layout: fixed;

    border-left: 1px solid #ddd;

    border-top: 1px solid #ddd;

  }

  th, td {

    border-right: 1px solid #ddd;

    border-bottom: 1px solid #ddd;

    vertical-align: middle;

    text-align: center;

    padding: 12px 0;

    color: #666;

    font-size: 14px;

  }

  th {

    font-weight: normal;

  }

</style>

方式二：display: table--不推荐

外层div.distable设置样式display: table;

内层div.distable-cell*设置样式display: table-cell;

table布局下，可以实现合并单元格效果。有两点说明:

1）为合并单元格的行 设置边框时，比较复杂，容易错位。

2）浏览器缩放到200+%展示时，此布局会变形。

因此，这种写法并不推荐。

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

78

<div>

    <div class="distable border-sub-rb border-lt">

        <div class="distable-cell1">种类</div>

        <div class="distable-cell1">名称</div>

        <div class="distable-cell2">描述</div>

    </div>

    <div class="distable border-l">

        <div class="distable-cell1 border-rb" style="background-color: #ddd;border-color: red">水果</div>

        <div class="distable-cell3">

            <div class="distable border-sub-rb">

                <div class="distable-cell1">香蕉</div>

                <div class="distable-cell2">香蕉（学名：Musa nana Lour.）是芭蕉科、芭蕉属植物。植株丛生，具匐匍茎，矮型的高3.5米以下，一般高不及2米...</div>

            </div>

            <div class="distable border-sub-rb">

                <div class="distable-cell1">苹果</div>

                <div class="distable-cell2">苹果（Malus pumila Mill.），是落叶乔木，通常树木可高至15米，但栽培树木一般只高3-5米左右...</div>

            </div>

        </div>

    </div>

    <div class="distable border-r">

        <div class="distable-cell4 border-lb">其他</div>

        <div class="distable-cell2 border-bl" style="background-color: #ddd;border-color: red">--</div>

    </div>

</div>

<style>

    .distable {

        display: table;

        color: #666;

        font-size: 14px;

        box-sizing: border-box;

    }

    [class*=distable-cell] {

        display: table-cell;

        text-align: center;

        vertical-align: middle;

        box-sizing: border-box;

    }

    .distable-cell1 {

        width: 100px;

    }

    .distable-cell2 {

        width: 400px;

        padding: 12px 0;

    }

    .distable-cell3 {

        width: 500px;

    }

    .distable-cell4 {

        width: 200px;

    }

    .border-sub-rb [class*=distable-cell] {

        border-right: 1px solid #ddd;

        border-bottom: 1px solid #ddd;

        padding: 12px 0;

    }

    .border-lt {

        border-left: 1px solid #ddd;

        border-top: 1px solid #ddd;

    }

    .border-lb {

        border-left: 1px solid #ddd;

        border-bottom: 1px solid #ddd;

    }

    .border-l {

        border-left: 1px solid #ddd;

    }

    .border-rb {

        border-right: 1px solid #ddd;

        border-bottom: 1px solid #ddd;

    }

    .border-bl {

        border-bottom: 1px solid #ddd;

        border-left: 1px solid #ddd;

    }

    .border-r {

        border-right: 1px solid #ddd;

    }

</style>

方式三：display: flex

flex布局下，可以实现合并单元格效果。有两个难点:

1）合并单元格的垂直居中效果：flex布局嵌套，内层的flex设置align-items: center;

2）边框的设置：设置比较复杂，容易错位。

虽然可以实现合并单元格效果，并不推荐。

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

78

79

80

81

82

83

84

85

86

87

88

89

<div style="width: 600px;">

    <div class="flex-box border-sub-rb border-lt">

        <div class="flex-cell1">种类</div>

        <div class="flex-cell1">名称</div>

        <div class="flex-cell2">描述</div>

    </div>

    <div class="flex-box border-l">

        <div class="flex-cell1 border-b flex-cc" style="background-color: #ddd;border-color: red"><div>水果</div></div>

        <div class="flex-cell3 border-r">

            <div class="flex-box border-sub-bl">

                <div class="flex-cell1 flex-cc"><div>香蕉</div></div>

                <div class="flex-cell2 flex-cc" style="background-color: #ddd;border-color: red"><div>香蕉（学名：Musa nana Lour.）是芭蕉科、芭蕉属植物。植株丛生，具匐匍茎，矮型的高3.5米以下，一般高不及2米...</div></div>

            </div>

            <div class="flex-box border-sub-bl">

                <div class="flex-cell1 flex-cc"><div>苹果</div></div>

                <div class="flex-cell2 flex-cc"><div>苹果（Malus pumila Mill.），是落叶乔木，通常树木可高至15米，但栽培树木一般只高3-5米左右...</div></div>

            </div>

        </div>

    </div>

    <div class="flex-box">

        <div class="flex-cell4 border-lb flex-cc"><div>其他</div></div>

        <div class="flex-cell2 border-rbl flex-cc" style="background-color: #ddd;border-color: red"><div>--</div></div>

    </div>

</div>

<style>

    .flex-box {

        display: flex;

        flex-direction: row;

        flex-wrap: nowrap;

        color: #666;

        font-size: 14px;

        text-align: center;

        box-sizing: border-box;

    }

    [class*=flex-cell] {

        box-sizing: border-box;

    }

    .flex-cell1 {

        width: 100px;

    }

    .flex-cell2 {

        width: 400px;

        padding: 12px 0;

    }

    .flex-cell3 {

        width: 500px;

    }

    .flex-cell4 {

        width: 200px;

    }

    .border-sub-rb [class*=flex-cell] {

        border-right: 1px solid #ddd;

        border-bottom: 1px solid #ddd;

        padding: 12px 0;

    }

    .border-sub-bl [class*=flex-cell] {

        border-bottom: 1px solid #ddd;

        border-left: 1px solid #ddd;

    }

    .border-lt {

        border-left: 1px solid #ddd;

        border-top: 1px solid #ddd;

    }

    .border-lb {

        border-left: 1px solid #ddd;

        border-bottom: 1px solid #ddd;

    }

    .border-l {

        border-left: 1px solid #ddd;

    }

    .border-rbl {

        border-right: 1px solid #ddd;

        border-bottom: 1px solid #ddd;

        border-left: 1px solid #ddd;

    }

    .border-b {

        border-bottom: 1px solid #ddd;

    }

    .border-r {

        border-right: 1px solid #ddd;

    }

    .flex-cc {

        display: flex;

        flex-direction: row;

        flex-wrap: nowrap;

        justify-content: center;

        align-items: center;

    }

</style>

方式四：display: grid

grid布局学习成本会高一些，但代码看着最清晰。

grid有兼容性问题，谨慎使用。

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

<div class="container">

      <div class="item item-1"><div>种类</div></div>

      <div class="item item-2"><div>名称</div></div>

      <div class="item item-3"><div>描述</div></div>

      <div class="item item-4"><div>水果</div></div>

      <div class="item item-5"><div>香蕉</div></div>

      <div class="item item-6"><div>香蕉（学名：Musa nana Lour.）是芭蕉科、芭蕉属植物。植株丛生，具匐匍茎，矮型的高3.5米以下，一般高不及2米...</div></div>

      <div class="item item-7"><div>苹果</div></div>

      <div class="item item-8"><div>苹果（Malus pumila Mill.），是落叶乔木，通常树木可高至15米，但栽培树木一般只高3-5米左右...</div></div>

      <div class="item item-9"><div>其他</div></div>

      <div class="item item-10"><div>--</div></div>

</div>

<style>

  .container {

    display: grid;

    grid-template-columns: repeat(6, 100px);

    color: #666;

    font-size: 14px;

    border-left: 1px solid #ddd;

    border-top: 1px solid #ddd;

  }

  .item {

    border-right: 1px solid #ddd;

    border-bottom: 1px solid #ddd;

    text-align: center;

    padding: 12px 0;

    display: grid;

    align-items: center;

  }

  .item-1 {

    grid-column: 1 / 2;

  }

  .item-2 {

    grid-column: 2 / 3;

  }

  .item-3 {

    grid-column: 3 / 7;

  }

  .item-4  {

    grid-row: 2 / 4

  }

  .item-6 {

    grid-column: 3 / 7;

  }

  .item-8 {

    grid-column: 3 / 7;

  }

  .item-9 {

    grid-column: 1 / 3;

  }

  .item-10 {

    grid-column-end: span 4;

  }

</style>

总结：

table布局仍是实现合并单元格最简单的方式，grid次之，flex再次，display:table不推荐。
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章

  • 使用CSS实现有趣的汉堡菜单按钮的代码

    使用CSS实现有趣的汉堡菜单按钮的代码
    使用transition过渡属性和transform变形属性，让汉堡图标和关闭图标之间进行过渡、变形，形成视觉效果。 适用于h5页面或者app页面中，隐藏菜

  • CSS实现菜单箭头动画效果

    CSS实现菜单箭头动画效果
    其实是很简单的一个效果 思路：箭头图标相对li标签绝对定位，定位到列表之外+列表元素overflow：hidden +悬停动画 html 1 2 3 li class=listyle1 im

  • CSS实现剪切蒙版视差滚动效果

    CSS实现剪切蒙版视差滚动效果
    大家应该都知道响应式吧，像什么响应式布局等等，这都是我们在开发中经常能遇到的。在年前结束的一个公司项目中，涉及到了相关响应

  • CSS实现好看的聚光灯效果介绍

    CSS实现好看的聚光灯效果介绍
    使用-webkit-background-clip和clip-path，并配合animation属性，实现一个好看聚光灯效果。 可适用于页面加载或展示页面大标题内容。 核心代码部分

  • CSS合并单元格四种方式示例介绍(table/display/flex

    CSS合并单元格四种方式示例介绍(table/display/flex
    效果图： 方式一：table【最简单写法】 colspan：规定单元格可横跨的列数。 rowspan：规定单元格可横跨的行数。 通过table的colspan和rowspan轻松

  • css中position:sticky粘性定位介绍

    css中position:sticky粘性定位介绍
    1、什么是粘性定位？ 粘性定位它基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动，在position:relative与position:fixed定位之间
  • 使用CSS完成视差滚动效果介绍
    在网页设计中，视差滚动效果可以为用户带来沉浸式的浏览体验。本文将详细介绍如何使用 CSS 来实现视差滚动效果。 视差滚动效果的原理

  • 使用CSS实现多行文本擦除效果的介绍

    使用CSS实现多行文本擦除效果的介绍
    今天来实现一个多行文本擦除的效果，有种经典咏流传节目中表演开始前阅读诗句的一些既视感，在工作中其实也遇到过这样的需求当时是
  • CSS中Position:Sticky不起作用的问题解决
    sticky属性不生效： 检查浏览器兼容性； 检查是否指定了阈值； 检查 Safari 的供应商前缀； 检查祖先元素是否具有overflow属性集； 检查heig

  • css通过子元素选择父元素的实现介绍

    css通过子元素选择父元素的实现介绍
    伪类:has选择父元素 1 2 3 4 5 6 7 8 td:has( .unfoldTable){ //可选中所有td下包含unfoldTable的class标签的td属性 color: red; } td:has( div){ //可选中所有td下包
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计