jquery - 在表格 html 中定位 UI 元素

Question

我正在定义一个表格，其中包含页面中的下拉列表、文本框和预定义文本等 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/

内部元素的位置总是根据长描述的字符数而变化。

是否有办法防止这种情况发生，使元素不相互依赖？

虽然问题看起来很简单，但我正在寻找更好的方法来解决这个问题 这肯定会对我的学习道路有所帮助。

欢迎任何建议、反馈。

感谢您的帮助

Answer 1

包括宽度和换行。下面的线程有更多信息，我认为您的问题将是重复的。

HTML TD wrap text

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