Question

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

图像尺寸可以变化，它是动态的。这就是我在两列（相同高度）上插入相同图像的原因。在该示例中，所有条形码图像具有相同的尺寸，但不一定是必要的。

也许有人最好将右侧的复选框与左侧的条形码对齐？

Here就是一个例子。

我遇到问题的代码（我想对齐此复选框）：

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

目前它看起来像这样：

Answer 1

你走了，工作小提琴：

* {
  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>

Answer 2

根据我的理解，您可以使用此代码，首先运行此代码，方法是单击Run code Snippet按钮，然后验证您的期望：

PostIt

Answer 3

只需正确制作桌子，重新排列复选框和图片，使其符合以下结构：

<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>

注意“rowspan”属性！

Answer 4

rowspan属性可用于td！
因为，您不想让行具体显示，所以使用td 0px包含条形码的border-bottom-style样式。有了这个，你的任务就会简化！

#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/>

希望它有所帮助！

在表格单元格

4 个答案: