/    Sign up×
Community /Pin to ProfileBookmark

Text in table pushes table column out

Copy linkTweet thisAlerts:
Jan 26.2015

I have a table I created but it seems like in Description the longer the text is the futher it pushes the 2nd column out. I wanted the text to be more lines and the column closer.
I think it is a spacing issue, what do you guys thing?
[IMG]http://i58.tinypic.com/2ce6lx3.png[/IMG]

[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled 2</title>
</head>

<body>
<h1>View Item</h1>
<table cellpadding=”5″ cellspacing=”15″ >
<tr > <td> <b>Area:</b><br/>
<span class=”hillbillyForm” data-displayName=”Area”></span>
</td> <td>
<b>Legacy AFE:</b> <br>
<span class=”hillbillyForm” data-displayName=”Legacy AFE”></span> </td>
</tr>
<td width=”75%” class=”ms-vb”>
<b>File #:</b><br>
<span class=”hillbillyForm” data-displayName=”File #”></span></td>
<br><td>
<b>Wire Center:</b> <br>
<span class=”hillbillyForm” data-displayName=”Wire Center Number”></span>
</td>

<tr >
<td>
<b>vSAP #:</b> <br>
<span class=”hillbillyForm” data-displayName=”vSAP #”></span>
</td><td>
<b>Engineer:</b><br>
<span class=”hillbillyForm” data-displayName=”Engineer”></span>
</td>
</tr>

<tr >
</tr>
<tr><td>
<b>Muncipality:</b> <br>
<span class=”hillbillyForm” data-displayName=”Muncipality”></span>
</td>
<td>
<b>Type:</b> <br>
<span class=”hillbillyForm” data-displayName=”Type of ROW Request”></span>
</td>
</tr>
<tr></tr>
<tr >
<td>
<b>Address:</b><br>
<span class=”hillbillyForm” data-displayName=”Road/Street” width:1px;></span>
</td> <td><b>County:</b> <br>
<span class=”hillbillyForm” data-displayName=”County”></span></td>
</tr>
<td> <b>Description of Work:</b> <br>
<span class=”hillbillyForm” data-displayName=”Reason For Work”></span>
</td>
<td>
<b>WC Name:</b> <br>
<span class=”hillbillyForm” data-displayName=”Wire Center Name”></span></td>

<tr> <td>
<b>ROW Cost:</b><br>
<span class=”hillbillyForm” data-displayName=”ROW Cost”></span>
</td><td> <b>P & A:</b><br>
<span class=”hillbillyForm” data-displayName=”PA”></span>
</td> </tr>

<tr > <td>
<b>Due Date:</b><br>
<span class=”hillbillyForm” data-displayName=”Date ROW Required”></span>
</td>

<td valign=”top”>
<b>Date Applied For:</b><br>
<span class=”hillbillyForm” data-displayName=”Date Applied For”></span>
</td>
</tr>

<tr >
<td>
<b>Date Recieved:</b> <br>
<span class=”hillbillyForm” data-displayName=”Date Recv”></span></td>
<td valign=”top”>
<b>Comp. Date:</b><br>
<span class=”hillbillyForm” data-displayName=”Comp. Date”></span>
</td>
</tr>

<tr >
<td>
<b>Status:</b><br>
<span class=”hillbillyForm” data-displayName=”Status”></span>
</td>
<td>
<b>Remarks:</b> <br>
<span class=”hillbillyForm” data-displayName=”Detailed ROW Remarks”></span>
</td>
</tr>
</table>
</body>

</html>
[/CODE]

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@soupiauthorJan 26.2015 — Any one have any suggestions?
Copy linkTweet thisAlerts:
@MaxxxxJan 26.2015 — I am a little confused what you're trying to accomplish.
Copy linkTweet thisAlerts:
@MaxxxxJan 26.2015 — Try <br> in between some of your words to shift it down
Copy linkTweet thisAlerts:
@soupiauthorJan 26.2015 — Try <br> in between some of your words to shift it down[/QUOTE]

Please click on the link to view the image.

Do you see details field is pushing the right column further away because the line is long.
Copy linkTweet thisAlerts:
@MaxxxxJan 26.2015 — lets say the below text is what your working with. Try this.

Do you see details field is pushing the right <br> column further away <br> because the line is long.
Copy linkTweet thisAlerts:
@Kevin2Jan 26.2015 — [code=html]<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Untitled 2</title>
<style>
table {
width: 100%;
}
td {
vertical-align: top;
padding: 10px; /*adjust to taste*/
}
.leftCol {
width: 25%; /*adjust to taste*/
}

</style>
</head>

<body>
<h1>View Item</h1>
<table>
<tr>
<td class="leftCol">
<b>Area:</b><br>
<span class="hillbillyForm" data-displayName="Area"></span>
</td>
<td>
<b>Legacy AFE:</b><br>
<span class="hillbillyForm" data-displayName="Legacy AFE"></span>
</td>
</tr>
<tr>
<td class="ms-vb">
<b>File #:</b><br>
<span class="hillbillyForm" data-displayName="File #"></span>
</td>
<td>
<b>Wire Center:</b><br>
<span class="hillbillyForm" data-displayName="Wire Center Number"></span>
</td>
</tr>
<tr>
<td>
<b>vSAP #:</b><br>
<span class="hillbillyForm" data-displayName="vSAP #"></span>
</td>
<td>
<b>Engineer:</b><br>
<span class="hillbillyForm" data-displayName="Engineer"></span>
</td>
</tr>
<tr>
<td>
<b>Muncipality:</b><br>
<span class="hillbillyForm" data-displayName="Muncipality"></span>
</td>
<td>
<b>Type:</b><br>
<span class="hillbillyForm" data-displayName="Type of ROW Request"></span>
</td>
</tr>
<tr>
<td>
<b>Address:</b><br>
<span class="hillbillyForm" data-displayName="Road/Street"></span>
</td>
<td>
<b>County:</b><br>
<span class="hillbillyForm" data-displayName="County"></span>
</td>
</tr>
<tr>
<td>
<b>Description of Work:</b><br>
<span class="hillbillyForm" data-displayName="Reason For Work"></span>
</td>
<td>
<b>WC Name:</b><br>
<span class="hillbillyForm" data-displayName="Wire Center Name"></span>
</td>
</tr>
<tr>
<td>
<b>ROW Cost:</b><br>
<span class="hillbillyForm" data-displayName="ROW Cost"></span>
</td>
<td>
<b>P & A:</b><br>
<span class="hillbillyForm" data-displayName="PA"></span>
</td>
</tr>
<tr>
<td>
<b>Due Date:</b><br>
<span class="hillbillyForm" data-displayName="Date ROW Required"></span>
</td>
<td>
<b>Date Applied For:</b><br>
<span class="hillbillyForm" data-displayName="Date Applied For"></span>
</td>
</tr>
<tr>
<td>
<b>Date Recieved:</b><br>
<span class="hillbillyForm" data-displayName="Date Recv"></span>
</td>
<td>
<b>Comp. Date:</b><br>
<span class="hillbillyForm" data-displayName="Comp. Date"></span>
</td>
</tr>
<tr>
<td>
<b>Status:</b><br>
<span class="hillbillyForm" data-displayName="Status"></span>
</td>
<td>
<b>Remarks:</b><br>
<span class="hillbillyForm" data-displayName="Detailed ROW Remarks"></span>
</td>
</tr>
</table>
</body>

</html>[/code]
Copy linkTweet thisAlerts:
@soupiauthorJan 26.2015 — lets say the below text is what your working with. Try this.

Do you see details field is pushing the right <br> column further away <br> because the line is long.[/QUOTE]

<br> didnt seem to work

The text starts in the bold description of work
[CODE] <td> <b>Description of Work:</b> <br>
[B] <span class="hillbillyForm" data-displayName="Reason For Work"></span>[/B]
</td>
<td>
<b>WC Name:</b> <br>
<span class="hillbillyForm" data-displayName="Wire Center Name"></span></td>

<tr> <td>
<b>ROW Cost:</b><br>
<span class="hillbillyForm" data-displayName="ROW Cost"></span>
</td><td> <b>P & A:</b><br>
<span class="hillbillyForm" data-displayName="PA"></span>
</td> </tr>



<tr > <td>
<b>Due Date:</b><br>
<span class="hillbillyForm" data-displayName="Date ROW Required"></span>
</td>

<td valign="top">
<b>Date Applied For:</b><br>
<span class="hillbillyForm" data-displayName="Date Applied For"></span>
</td>
</tr>

<tr >
<td>
<b>Date Recieved:</b> <br>
<span class="hillbillyForm" data-displayName="Date Recv"></span></td>
<td valign="top">
<b>Comp. Date:</b><br>
<span class="hillbillyForm" data-displayName="Comp. Date"></span>
</td>
</tr>

<tr >
<td>
<b>Status:</b><br>
<span class="hillbillyForm" data-displayName="Status"></span>
</td>
<td>
<b>Remarks:</b> <br>
<span class="hillbillyForm" data-displayName="Detailed ROW Remarks"></span>
</td>
</tr>
</table>
</body>

</html>
[/CODE]
×

Success!

Help @soupi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...