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容器/行/列网格而不是表格，这样可以实现良好的响应式设计并适应不同的设备。表/ tr / td是基础知识，也是很好的学习方法。确保您将知识提升到响应式设计。

Answer 2

这是您问题的具体答案

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

虽然你可以使用宽度和自动换行css属性。

这里有更新的小提琴点击here

在表html中定位UI元素

2 个答案: