在表格 html 中定位 UI 元素答案

【问题标题】：positioning UI elements in a table html在表格 html 中定位 UI 元素
【发布时间】：2014-10-19 09:43:32
【问题描述】：

我正在定义一个表格，其中包含 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/

内部元素的位置总是取决于长描述的字符数。

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

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

欢迎任何建议，反馈。

感谢您的帮助

【问题讨论】：

标签： jquery html jquery-ui jsp

【解决方案1】：

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

HTML TD wrap text

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

【讨论】：

【解决方案2】：

这是对您问题的具体回答

table td {
  width: 33%;
  word-wrap: break-word;
  text-align: left;
  padding: 3px;
}

虽然您可以使用 width 和 word-wrap css 属性来玩转。

这是更新后的小提琴点击here

【讨论】：