Table data are out of controll

Question

0.00/5 (No votes)

See more:

HY!
I know how to use table in html very well, but the error iam facing know is un-understandable for me...I know how to use table in html very well, but the error iam facing know is un-understandable for me...
Here is my code...

HTML

<html>
<head>
<title>tets</title>
<style>
table
{
    border: 1px solid black;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
    text-align: center;
    width: 500px;
    max-width: 500px;
}
th
{
    border-bottom:1px solid gray;
    border-spacing: 2px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    background: silver;
}
td
{
    max-width:500px;
    background: silver;
}
.tbl
{
    margin-top:200px;
    margin-left: 230px;
}
</style>

</head>
<body>
    <div class="tbl">
<table>
    <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>UserName</th>
    <th>Email</th>
    <th>Password</th>
</tr>
    <tr>
        <td>Zaffar</td>
        <td>Khan</td>
        <td>MSZ</td>
        <td>M@yahoo.com</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Zaffar</td>
        <td>Khan</td>
        <td>MSZ</td>
        <td>M@yahoo.com</td>
        <td>123</td>
    </tr>
    <tr>
        <td>Zaffar</td>
        <td>Khan</td>
        <td>MSZ</td>
        <td>M@yahoo.comgggggggggggggggggggggggggg</td>
        <td>123ggggggggggggggggggggggggggggggggggggggggggghjjjjjjjjjjjjjjjjjjjjjjfjyhfffffffffffffffffffffffffuyyyyyxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
    </tr>
</table>
</div>
</body>
</html>

the error is when i enter the long data like you seen above and controll the width of the table, then the data will conflict, mean the data is out of cell and cross the width.. please run the code and check what is the error....
i want the data within the table and with a width i specifies..

Posted 30-Nov-13 2:42am

msz900

Updated 30-Nov-13 11:21am

Nelek

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mike Meinz · Answer 1 · 2013-11-30T04:31:00

Because you have no space characters in the long <TD> tags, the browser doesn't know where to wrap the contents.

Option 1
This is a sample of how a string value from the database can be processed to insert <BR> tags every so many characters and create a new string that can be used in the HTML table cell. I used 20 for the width value. This sample is in VB. You can convert to whatever language you are using. By doing this, you are not modifying the value in the database. You are processing the data for display so that it appears properly.

VB

Dim strFromdatabase As String = "123ggggggggggggggggggggggggggggggggggggggggggghjjjjjjjjjjjjjjjjjjjjjjfjyhfffffffffffffffffffffffffuyyyyyxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

Dim strNewString As String ' New string to be output into the table cell
Dim x As Integer ' Number of characters left to process
Dim y As Integer ' Current index into source string
Dim z As Integer ' Number of characters to process this time through the loop
Const CELLWIDTH As Integer = 20
x = strFromdatabase.Length
y = 0
strNewString = ""
While x > 0
    z = Math.Min(CELLWIDTH, x)
    strNewString += strFromdatabase.Substring(y, z)
    x = x - z
    y = y + z
    If x > 0 Then
        strNewString += "<BR>"
    End If
End While
Debug.WriteLine(strNewString)

Option 2
Use the Width attribute in the <TH> and <TD> tags or define a new style in your stylesheet that contains the Width property and use that style for the Email and Password columns.

<tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>UserName</th>
    <th Width=100>Email</th>
    <th Width=100>Password</th>
</TR>