1

I am defining a table which has UI elements like a drop down list , textbox and predefined texts in a page..

<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>

Included a JSFiddle for it http://jsfiddle.net/4r2mg1rc/

The positioning of the inner elements always vary depend on the no of characters of the long desc.

Is there anyway to prevent this occurence so that the elements are not interdependent?

Though the question seems to be simple , i am looking for better ways to solve this problem which will definitely help me in my learning path.

Any suggestions , feedback are welcome.

Thanks for the help

jaggs
  • 298
  • 2
  • 9
  • 28

2 Answers2

2

Include width and wrap. Below thread has more info and I think your question will be a duplicate.

HTML TD wrap text

Also, I would advise using Bootstrap container/row/column grids rather than table as that allows for a good responsive design and adapts to different devices. Table/tr/td is the basics and good to learn. Make sure you advance your knowledge to responsive designs.

Community
  • 1
  • 1
sbjumani
  • 124
  • 8
1

this is a specific answer to your question 

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

although you can play around using the width and word-wrap css property.

Here's the updated fiddle click here

cyanotrix
  • 51
  • 1
  • 5