Question

我有一张3行的桌子我决定将每一行分成4列，即使一行中最多的TD是两行。
因此，带有一个TD的顶行，具有4的colspan。
下一行有两个TD，第一个是colspan为1，第二个是colspan为3。第三行有两个TD，每个都有一个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>

看起来底行上的第二个按钮不会向左移动任何靠近它上方的select元素的右端。

有谁能告诉我我需要做些什么来解决这个问题？
这是JSFiddle代码的链接 - http://jsfiddle.net/Joth/TdVAd/2/
谢谢！

Answer 1

请尝试以下代码...

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

Answer 2

主要问题是'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/

享受您的代码

html元素没有使用colspan排队

2 个答案: