显示复选框而不是图像

我想显示checkbox而不是图像（图像必须隐藏在每一行中）。另一个问题是height为图像保留的空间必须与图像相同，但width必须是30px（图像的高度是动态的，所以我不知道它）。如果复选框位于为图像保留的空间的中心，这将是理想的。是否有可能做到这一点？显示复选框而不是图像

Here是示例和代码：

<table> 
 
    <thead> 
 
    <th>Image</th> 
 
    </thead> 
 
    <tr> 
 
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td> 
 
    </tr> 
 
    <tr> 
 
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td> 
 
    </tr> 
 
    <tr> 
 
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td> 
 
    </tr> 
 
    <tr> 
 
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td> 
 
    </tr> 
 
    <tr> 
 
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td> 
 
    </tr> 
 
</table>

来源

2017-02-26 FrenkyB

那么你为什么不使用？ –

对不起，我不明白你的意思是图像高度必须保持？你想要一个表格单元的高度必须是原始图像的高度？ –

jsfiddle

CSS

img{ 
    /*opacity: 0; adjust the opacity to show or hide the img*/ 
    visibility: hidden; /* @Marcos Silva */ 

} 
.img_con{ 
    position: relative; 
    width: 30px; 
    overflow-x: hidden; 
} 
input{ 
    position: absolute; 
    left: 0; 
    top:0; 
    right: 0; 
    bottom:0; 
    margin: 0 auto; 
    margin-top: 100% 
}

HTML

<table> 
    <thead><th>Image</th></thead> 
    <tr> 
    <td><div class="img_con"><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></div></td> 
    </tr> 
    <tr> 
    <td><div class="img_con"><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></div></td> 
    </tr> 
    <tr> 
    <td><div class="img_con"><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></div></td> 
    </tr> 
    <tr> 
    <td><div class="img_con"><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></div></td> 
    </tr> 
    <tr> 
    <td><div class="img_con"><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></div></td> 
    </tr> 
</table>

来源

2017-02-26 05:01:55

如果所有的DIV都在同一个单元中，是否有可能实现相同的结果？只有一行，一个单元格？ – FrenkyB

这样https://jsfiddle.net/MoazW/j2sLqtjf/2/ @FrenkyB –

相同的CSS @FrenkyB –

如果我理解你的问题，你想有一个CSS规则这样的：

img { 
 
     position: absolute; 
 
     width: 30px; 
 
     visibility: hidden; 
 
    }

<table> 
 
    <thead><th>Image</th></thead> 
 
    <tr> 
 
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td> 
 
    </tr> 
 
    <tr> 
 
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td> 
 
    </tr> 
 
    <tr> 
 
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td> 
 
    </tr> 
 
    <tr> 
 
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td> 
 
    </tr> 
 
    <tr> 
 
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td> 
 
    </tr> 
 
</table>

来源

2017-02-26 05:10:40

显示复选框而不是图像

回答

相关问题