顯示覆選框而不是圖像

我想顯示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

顯示覆選框而不是圖像

回答

相關問題