html中table单元格添加图片完全填充

HTML/CSS 专栏收录该内容
3 篇文章 0 订阅

转载:http://www.cnblogs.com/zmjh/p/8810805.html

css样式如下:

.table{
                display: table; 
                border-collapse: collapse;
                width: 400px;
                height: 200px;
            }
            .tr{
                display: table-row;
                height: 100px;
            }
            .td{
                display: table-cell;
                width: 100px;
                text-align: center;
                vertical-align: middle;
                border: solid 1px red;
                table-layout: fixed;
            }
            .table .td img{
                width: 100px;
                height: 100px;
                display:block;
            }

html主要代码如下:

<div class='table'>
            <div class='tr'>
                <div class='td'><img src="img/zm2.png" alt="" /></div>
                <div class='td'><img src="img/zm2.png" alt="" /></div>
                <div class='td'></div>
                <div class='td'></div>
            </div>
            <div class='tr'>
                <div class='td'><img src="img/zm2.png" alt="" /></div>
                <div class='td'></div>
                <div class='td'></div>
                <div class='td'></div>
            </div>
        </div>

  • 5
    点赞
  • 0
    评论
  • 20
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值