html - 在表格表格单元格内显示复选框而不是图像

Question

我想将复选框与该列左侧的图像(条形码)对齐。到目前为止我尝试过的是在两列中插入相同的图像，但隐藏右侧的图像。显示的不是右侧的图像，而是复选框。但是，它没有与左栏上的条形码对齐。可以这样做吗？

图像大小可以变化，它是动态的。这就是为什么我在两列(相同高度)上插入了相同的图像。在示例中，所有条形码图像的大小都相同，但并非必须如此。

也许有人有更好的办法将右边的复选框与左边的条形码对齐？

Here就是例子。

我有问题的代码(我想对齐这个复选框):

<img src='http://i.imgur.com/4PxPOjx.png' style='visibility:hidden;width:30px;'>
<input type='checkbox'><br/>
<label></label><br/>

目前它看起来像这样:

Answer 1

rowspan 属性可用于您的 td!
因为您不想让行特别可见，所以将包含条形码的 td 样式设置为 border-bottom-style 0px。有了它，您的任务将得到简化!

#tblArticles{font-size: 12px !important; font-family: verdana, sans-serif; border-collapse: collapse; width: 100%;}
#tblArticles td{border: 1px solid black;text-align: center;padding: 8px;}
#tblArticles th {border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}
/*#tblArticles tr:nth-child(even) {background-color: #dddddd;}*/</style>
<style>#tblLeft{position:absolute;left:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:40%;}
#tblLeft td{font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;}
#tblLeft th {font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}</style>
<style>#tblRight{position:absolute;right:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:20%;}
#tblRight td{font-size: 10px !important; text-align: center;padding: 8px;}

<label style='margin-right:20px;'><b>Opomba za dostavo:</b></label>545454<br/>
<label style='margin-right:20px;'><b>Št. zunanje naročilnice:</b></label>fsdfsfd<br/><br/>
<table border="1" id='tblArticles'>
<thead>
<th>Vrsta blaga/storitve</th>
                                <th>Interna številka</th>
                                <th>Prodana koda</th>
                                <th>Količina</th>
                                <th>EnM</th>
                                <th>Cena brez DDV</th>
                                <th>Vrednost brez DDV</th>
                                <th>DDV</th>
                                <th>Znesek DDV</th>
                                <th>Vrednost z DDV</th>
</thead>
<tfoot>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
</tfoot>
<tbody>
<tr>
<td rowspan="11"><label>Mali kuharski mojster</label></td>
<td style="border-bottom-style:hidden;">
<img src='http://i.imgur.com/4PxPOjx.png'><br><label>NUdVOVFWIE1L</label><br/>
</td>
<td><input type='checkbox'><br/>
<label></label><br/></td>
<td rowspan="11">11,00</td>
<td rowspan="11">KOM</td>
<td rowspan="11">3221,00 €</td>
<td rowspan="11">35431,00 €</td>
<td rowspan="11">22,00 %</td>
<td rowspan="11">7794,82 €</td>
<td rowspan="11">43225,82 €</td>
</tr>
<tr>
<td style="border-bottom-style:0px;">
<img src='http://i.imgur.com/4PxPOjx.png'><br><label>NUdVOVFWIE1L</label><br/>
</td>
<td><input type='checkbox'><br/>
</td>
</tr>

</tbody>
</table><br/>
<div style='page-break-inside:avoid;margin-bottom: 30px;'>
<label style='position:relative;left:0;font-size:12px;'>Specifikacija obračunanega davka, dokumenta št.:</label><br/>
<div id='divBottom' style='position:relative;width:100%;min-height:160px;'>
<table id='tblLeft'>
<th>Stopnja</th><th>Osnova za DDV</th><th>Znesek DDV</th><th>Vrednost z DDV</th>
<tr>
<td>9,5 %</td><td>0,00 €</td><td>0,00 €</td><td>0,00 €</td>
</tr><tr>
<td>22 %</td><td>37929,10 €</td><td>8344,40 €</td><td>46273,50 €</td>
</tr>
</table>
<table id='tblRight'>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>Skupaj brez DDV:</b></td><td style='text-align:right;'>37929,10 €</td>
</tr>
<tr>
<td style='text-align:left;'><b>Osnova za DDV</b></td><td style='text-align:right;'>37929,10 €</td>
</tr>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>DDV:</b></td><td style='text-align:right;'>8344,40 €</td>
</tr>
</table>
<label style='position:absolute;right:80px;bottom:20px;'><b>SKUPAJ:</b></label>
<label style='position:absolute;right:0;bottom:20px;'><b>46273,50 €</b></label>
</div></div><br/><br/><br/>

希望对您有所帮助!