jquery - 在表格html中放置UI元素

我正在定义一个表，该表具有UI元素，例如页面中的下拉列表，文本框和预定义文本。

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cmt_bg" vspace="0" hspace="0">
<tr>
    <td valign="top"><p class="formheading">School:</p></td>
    <td valign="top" class="cmt_left_bdr"><p class="formheading"><c:out value="${bean.school}"/></p></td>
    <td valign="top"><p class="formheading">Department:</p></td>
    <td valign="top" class="cmt_left_bdr"><p class="formheading"><c:out value="${bean.department}"/></p></td>
</tr>
<tr>
    <td valign="top"><p class="formheading">Entry Time:</p></td>
    <td valign="top" class="cmt_left_bdr"><p class="formheading"><c:out value="${bean.entryTime}"/></p></td>
    <td valign="top"><p class="formheading">Exit Time:</p></td>
    <td valign="top" class="cmt_left_bdr"><p class="formheading"><c:out value="${bean.exitTime}"/></p></td>
</tr>
<tr>
    <td valign="top"><p class="formheading">Long Description:</p></td>
    <td valign="top" class="cmt_left_bdr"><p class="formheading"><c:out value="${bean.longDesc}"/></p></td>
</tr>
</table>

为此包含了一个JSFiddle http://jsfiddle.net/4r2mg1rc/

内部元素的位置始终取决于长desc字符的数量。

无论如何，有什么方法可以防止这种情况的发生，从而使这些元素不相互依赖？

尽管问题似乎很简单，但我正在寻找解决此问题的更好方法
这无疑将对我的学习道路有所帮助。

任何建议，欢迎反馈。

谢谢您的帮助

最佳答案

包括宽度和环绕。下面的线程有更多信息，我想您的问题将是重复的。

HTML TD wrap text

另外，我建议使用Bootstrap容器/行/列网格而不是表格，因为这样可以实现良好的响应设计并适应不同的设备。表/ tr / td是基础知识，易于学习。确保您将知识提高到响应式设计。