CODEWITHSUNDEEP
htmlhtml-table
Ion Farima
Ion Farima

Reputation: 327

Line breaks in html table

How can I stop my table from increasing width every time I insert loooong commentary?

I made a simple example :

<!DOCTYPE html>
<html>
    <body>
        <table width='350'  border="0" align="center" cellpadding="3" cellspacing="1" class="table">
            <tr>
                <th id="row_style" bgcolor='#D6D6D6'>ID</th>
                <th id="row_style" width= "50%" bgcolor='#D6D6D6'>Content</th>
                <th id="row_style" bgcolor='#D6D6D6'>Date</th>
            </tr>
            <tr>
                <td id="row_style" bgcolor='#3399FF' scope='col' width='50'>Example</td>td>
                <td id="row_style" width ='10%'> Content</td>td>
                <td id="row_style" bgcolor='#3399FF' scope='col' width ='10%'>Example</td>td>
                <td width ='10%'></td>
            </tr>
        </table>
    </body>
</html>

When I increase the word "content" the table width is increasing.. how can I stop this and insert a line break?

Upvotes: 14

Views: 130075

Answers (4)

Riddhi
Riddhi

Reputation: 1

Add style: 

td
{
    border: solid 1px #000000;
    padding: 5px;
}
th
{
    border: solid 1px #000000;
    padding: 5px;
}
/* @media print
{
    table
    {
        page-break-after: always;
    }
}*/

Give style to tr:

style="page-break-inside: avoid;"

Upvotes: 0

danielassayag
danielassayag

Reputation: 931

Sounds terrible but you should use:

<tr><td><br></td></tr>

Upvotes: 15

user1721135
user1721135

Reputation: 7092

You can do this by setting a width for the table and you could also use 

word-wrap:break-word;

In order to prevent really long words to break out of boundaries.

Width is best set in css:

Edit: include 

table-layout:fixed;

Demo

http://jsbin.com/atonut/1/edit

table {
width:500px;
table-layout:fixed;
}


td {
word-wrap:break-word;
}

If your problem is a lot of text rather then incredibly long words, only use width, and leave the word-wrap out. Hope that helps.

Upvotes: 19

user1942990
user1942990

Reputation: 60

Here is the answer : 

<table width='350'  border="0" align="center" cellpadding="3" cellspacing="1" class="table">
                <tr>
                    <th id="row_style" bgcolor='#D6D6D6'>ID</th>
                    <th id="row_style" width= "10%" bgcolor='#D6D6D6'>Content</th>
                    <th id="row_style" bgcolor='#D6D6D6'>Date</th>

                </tr>
<tr>
                            <td id="row_style" bgcolor='#3399FF' scope='col' width='10%'>Example</td>
                            <td id="row_style" width ='10%'> Contentd</td>
                            <td id="row_style" bgcolor='#3399FF' scope='col' width ='10%'>Example</td>
                            <td width ='10%'>
</body>
</html>

Upvotes: -1

Related Questions