我想使复选框与该列左侧的图像（条形码）对齐。我到目前为止所尝试的是在两列中插入相同的图像，但隐藏在右侧。显示的是复选框，而不是右侧的图像。但是，它与左栏中的条形码不一致。是否有可能做到这一点？显示复选框而不是表格单元格内的图像
图像大小可以变化，它是动态的。这就是为什么我在两列（相同高度）上插入相同图像的原因。在这个例子中，所有条形码图像的大小相同，但并非必要。
也许有人有更好的主意将右侧的复选框与左侧的条形码对齐？
Here就是这样的例子。
与（我要对齐此复选框）的代码，我有问题：
目前，它看起来像这样：
rowspan属性可用于您的td！
因为您不希望具有特别可见的行，请使用border-bottom-style 0px指定包含条形码的td。这样，你的任务就简化了！
#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/>希望它能帮助！
非常感谢。这是唯一真正奏效的东西。请如果你可以看看我的下一个问题：http://stackoverflow.com/questions/42478165/table-row-no-page-break-when-exporting-to-pdf – FrenkyB
在这里，你走了，工作小提琴：
* {
text-align: center;
}<table style="width:100%">
<tr>
<th>x</th>
<th>y</th>
</tr>
<tr>
<td><img src="http://media.idownloadblog.com/wp-content/uploads/2016/09/Google-Allo-1.0-for-iOS-app-icon-small.png"></td>
<td>
<input type="radio" name="xy" value="xy">
</td>
</tr>
<tr>
<td><img src="https://lh3.googleusercontent.com/S8DKhY39f1jpVy1-JV3qpI_ftuJwJnKjNbRhrVRGi-MQjr6i73JQI3-dmkQ93E0Jb4hT=w300"></td>
<td>
<input type="radio" name="xy" value="xy">
</td>
</tr>
</table>但是，您不应该为您的项目使用表格，为什么不使用网格系统？ –
整个表格稍后会导出到PDF中。 – FrenkyB
按我的理解，你可以使用这个代码，首先通过点击运行代码片段按钮运行该代码，然后验证什么是您的期望：
<html>
<body>
<table>
<tr>
<th>
Left Column
</th>
<th>
Right Column
</th>
</tr>
<tr>
<td>
<img src="https://dummyimage.com/240x80/000/fff">
</td>
<td>
<input type="checkbox" style="display:block; margin:0 auto;">
</td>
</tr>
</table>
</body>
</html>
这工作。是否可以使用DIV而不是复选框？让我们说div与黑色边框和两倍大小复选框？ – FrenkyB
只是让你的表正常，重新排列复选框和图像，他们适应的结构如下：
<table style="width:100%">
<tr>
<th>Image</th>
<th>Checkbox</th>
</tr>
<tr>
<td><img src="http://placehold.it/200x50" alt="Image"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><img src="http://placehold.it/200x100" alt="Image"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><img src="http://placehold.it/200x30" alt="Image"></td>
<td><input type="checkbox"></td>
</tr>
</table>如果你面对的“合并”细胞（因为它在你的第一列的完成），拿这个例子来看看这个问题：要“行跨度”
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td {
text-align: center;
}
img {
vertical-align: top;
}
img ~ label {
display: block;
}<table style="width:100%">
<thead>
<th>Vrsta blaga/storitve</th>
<th>Interna številka</th>
<th>Prodana koda</th>
</thead>
<tr>
<td rowspan="3">Mali kuharski mojster</td>
<td><img src="http://placehold.it/200x50" alt="Image"><label>NllMUkZGIE1L</label></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><img src="http://placehold.it/200x100" alt="Image"><label>SDRNM0Q4IE1L</label></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><img src="http://placehold.it/200x30" alt="Image"><label>RzNCRTJYIE1L</label></td>
<td><input type="checkbox"></td>
</tr>
</table>讲究属性！
尝试显示：无;代替？为什么你需要复制图像，我没有得到它。 – Mike
尝试将它们的行高设置为相同的值，或者将它们中的每一个设置为具有相同高度的相同div.class，然后将其垂直对齐。 –
@Dražen也许你有这样的例子吗？ – FrenkyB