CODEWITHSUNDEEP
htmlcss
Razeth
Razeth

Reputation: 69

Limit the character in HTML column

Hello I have a table that look like this

HTML table

I want to limit the number of characters within each column, so it will display properly, in this picture I haven't included any space to it, so it did not go into the next line when it reach the max-width.

and this is my css code.

#table-main {
    width: 740px;
    font-size: 12px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 2px;
}

#table-main th {
    max-width: 50px;
    padding: 5px;
    color: #B22222;
    background: #7fd9c1;
    text-align: left;
}

#table-main tr.holiday td {
   background: #ffc0cb;
}

#table-main td {
   max-width: 50px;
   padding: 5px;
   background: #D1EEEE;
   text-align: left;
   table-layout:fixed
   word-wrap: break-word;
}

Any idea how to achieve it? Thanks.

Upvotes: 0

Views: 4397

Answers (2)

SteveB
SteveB

Reputation: 924

Try to use the overflow option to hide anything that does not fit in the column.

overflow: Hidden;

You can find more details at Link

Upvotes: 0

Bhavya Shaktawat
Bhavya Shaktawat

Reputation: 2512

Try this, it will break by the word as well as wrap the content

word-break: break-all;
word-wrap:break-word;

Upvotes: 2

Related Questions