ASP.NET Fix Column Width

I am trying to get the last column to wrap.  The value is returning more than one e-mail address.   The issue is it is expanding the page and the user has to scroll to the right.  I want to limit how much the user has to scroll to the right.
<tr>
                <td style="white-space:nowrap">
                    <a href='eventMaint.aspx?ID=<%#DataBinder.Eval(Container, "dataItem.ID") %>'>
                        <%#DataBinder.Eval(Container, "dataItem.ID") %>
                    </a>
                </td>
                <td style="white-space:nowrap"><%#DataBinder.Eval(Container, "dataItem.Name") %></td>
                <td style="white-space:nowrap"><%#DataBinder.Eval(Container, "dataItem.StreetAddress1") %></td>
                <td style="white-space:nowrap"><%#DataBinder.Eval(Container, "dataItem.City") %></td>
                <td style="white-space:nowrap"><%#DataBinder.Eval(Container, "dataItem.StateProvince") %></td>
                <td style="white-space:nowrap"><%#DataBinder.Eval(Container, "dataItem.ZipPostalCode") %> </td>
                <td style="width: 30%">
<%--                    <div style="width: 5px">--%>
                        <%#DataBinder.Eval(Container, "dataItem.EmailAddress") %>    
<%--                    </div>--%>
                </td>
            </tr>

Open in new window

LVL 2
CipherISAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
I'm afraid I can only help on the css side of things.

 What's the width of the table? Set it to 100% should stop it expanding.

Failing that datatables is a good JavaScript plugin to help with showing tabular data.

Also have a look at bootstrap (getbootstrap.com) for replacing your traditional table with floating div elements that "behave" better when it counts to layouts like yours.
0
CipherISAuthor Commented:
The width is set to 100% on the table.  It expands too far to the right.
0
RobOwner (Aidellio)Commented:
Would you mind posting the rendered html please, if only for that table. Obfuscate any data you need to of course but this way I'll be able to see exactly what's going on
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

CipherISAuthor Commented:
Here it is.  You can see the email is extending too far.

Here is the code on the asp side.

<table class="smallList">
	<asp:Repeater ID="rptList" runat="server">
	<HeaderTemplate>
	<tr>
		<th align="left">Company</th>
		<th align="left">Address</th>
		<th align="left">City</th>
		<th align="left">State</th>
		<th align="left">Zip</th>
		<th align="left">Org</th>
		<th align="left">Exp</th>
		<th align="left">Email</th>
	</tr>
	</HeaderTemplate>
	<ItemTemplate>
	<tr>
		<td style="white-space:nowrap"><%#DataBinder.Eval(Container, "dataItem.cmpName") %></td>
		<td style="white-space:nowrap"><%#DataBinder.Eval(Container, "dataItem.StreetAddress1") %></td>
		<td style="white-space:nowrap"><%#DataBinder.Eval(Container, "dataItem.City") %></td>
		<td style="white-space:nowrap"><%#DataBinder.Eval(Container, "dataItem.State") %></td>
		<td style="white-space:nowrap"><%#DataBinder.Eval(Container, "dataItem.Zip") %> </td>
		<td style="white-space:nowrap"><%#DataBinder.Eval(Container, "dataItem.Organization") %></td>
		<td style="white-space:nowrap"><%#DataBinder.Eval(Container, "dataItem.Expected")%> </td>
		<td style="width: 30%">
				<%#DataBinder.Eval(Container, "dataItem.EmailAddress") %>    
		</td>
	</tr>
	</ItemTemplate>
	</asp:Repeater>
	<tr align="center">
		<td colspan="14">
			<br/>
			<asp:LinkButton ID="lnkExport" runat="server" Text="Export" OnClick="lnkExport_Click" ></asp:LinkButton>
		</td>
	</tr>
</table>

Open in new window


Email
0
RobOwner (Aidellio)Commented:
Ok a couple of things:
- To be able to set the width of the table you need to specify the layout to "fixed"
- Also need to tell each cell to break-word when wrapping content

I've hardcoded every cell to be equal width but you could easily remove that and do it yourself, as long as the values add up to 100%

td, th {
  width: 12.5%;
  word-wrap: break-word;
  white-space: pre-line!important;
}
table {
  width: 100%;
  table-layout: fixed;
}
table * {
  border: 1px solid black;
}

Open in new window


demo: http://jsbin.com/qudayax/edit?css,output
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CipherISAuthor Commented:
Thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.