我有一个有3行的表
我决定将每行拆分为4列,即使一行最多有两个TD。
所以,最上面一排有一个TD,colspan为4。
下一行有两个TD,第一个的colspan为1,第二个的colspan3。
第三行有两个TD,每个TD的colspan为2。
这是HTML:
<table class="img">
<tbody>
<tr>
<td colspan="4" class="ttBtn"><hr></td>
</tr>
<tr>
<td colspan='1'>
<select id="moveShifts">
<option val="1">1st Shift</option>
<option val="2">2nd Shift</option>
<option selected="" val="3">3rd Shift</option>
</select>
</td>
<td colspan='3' style='display:block' dept="3">
<select id="moveDepts">
<option val="139">CO-MAIL 1</option>
<option val="140">CO-MAIL 2</option>
<option val="599">FORKLIFT</option>
<option val="665">LEAD TEMP</option>
<option selected="" val="666">OPERATOR</option>
<option val="16">PAMS-CTLMAIL</option>
<option val="463">PAMS-CTLMAIL GEN LAB ** DO NOT USE **</option>
<option val="141">PAMS-CTLPAL</option>
<option val="540">POLY BAG</option>
<option val="485">RECEIVING</option>
</select>
</td>
</tr>
<tr>
<td colspan='2'>
<input type="button" value="Update Punch Record" class="ttBtn" disabled='true' id="ttUpd">
</td>
<td colspan='2'>
<input type="button" value="Delete Punch Record" class="ttBtn" id="ttDel">
</td>
</tr>
</tbody>
</table>
看起来最下面一行的第二个按钮不会向左移动,也不会靠近上面选择元素的右端
有人能告诉我需要做什么来解决这个问题吗?
这里有一个链接到JSFiddle上的代码-http://jsfiddle.net/Joth/TdVAd/2/
谢谢!
试试下面的代码。。。
<tr>
<td colspan='4'>
<input type="button" value="Update Punch Record" class="ttBtn" disabled='true' id="ttUpd">
<input type="button" value="Delete Punch Record" class="ttBtn" id="ttDel">
</td>
</tr>
主要问题是"display:block;"在TD元素中(若将边框添加到表中,则显示它):
<td colspan="3" style='display:table-cell' dept="3">
您可以使用标签COLGROUP并在标签COL处设置宽度,例如:
<table class="img">
<colgroup><col width="25%" /><col width="25%" /><col width="25%" /><col width="25%" /></colgroup>
现场演示:http://jsfiddle.net/Magicianred/T9Ru5/4/
享受您的代码