将TD宽度设置为最大跨度的宽度

时间:2017-04-24 15:36:28

标签: html css

我目前遇到TD宽度问题;无论TD元素内的跨度长度如何,它都保持一致的宽度。我需要将TD元素完全调整为同一列中包含的最长span元素的宽度。

.Form {
  width: 100%;
}
.Form td {
  border: 1px solid black;
}
.Form td > span {
  font-weight: bold;
}
.Form td > input[type="text"] {
  border-radius: 3px;
  box-shadow: -2px 2px 5px 0px rgba(0, 0, 0, 0.4);
  width: 99%;
}
<table class="Form">
        <tr><td colspan="6"><h3>Some super header text with useful information.</h3></td></tr>
        <tr><td colspan="6"><h3>Other useful information.</h3></td></tr>
        <tr>
            <td><span>LONGEST EVER</span></td>
            <td colspan="2"><input type="text" id="txtPOC" runat="server" /></td>
            <td><span>Phone</span></td>
            <td colspan="2"><input type="text" id="txtPhone" runat="server" /></td>
        </tr>
        <tr>
            <td><span>Short</span></td>
            <td colspan="2"><input type="text" id="txtOrg" runat="server" /></td>
            <td><span>E-Mail</span></td>
            <td colspan="2"><input type="text" id="txtMail" runat="server" /></td>
        </tr>
    </table>

enter image description here

0 个答案:

没有答案