Html Question posted in
Some basic documentation can be found here.

Html – Text overflow issue in table

I am trying to display list in Table. But text overflow issue raised. How to fix this issue with css, Kindly guide me.

.pkgtable{
    width: 100%;
    table-layout: fixed;
}

.pkgtable th, td {
      vertical-align: top; 
    }

.pkgtable ul{
    font-size: 10px;
    line-height: 20px;
    width: 100%;
    list-style-type: square; 
}

.pkgtable li{
    margin-left: -12px;
    text-align: left;
    text-transform: uppercase;
}

screenshot

Tags:

2

Answers


  1. 0

    Do you have try to implement your lists in a div ?

    Login or Signup to reply.
  2. 0

    Add word-wrap and overflow properties to the table cells to handle long text:

    .pkgtable {
    width: 100%;
    table-layout: fixed;
}

.pkgtable th, .pkgtable td {
    vertical-align: top;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pkgtable ul {
    font-size: 10px;
    line-height: 20px;
    width: 100%;
    list-style-type: square;
    padding-left: 20px;
}

.pkgtable li {
    margin-left: -12px;
    text-align: left;
    text-transform: uppercase;
}

    Note:- if you will get any further issues change the above css as per your scenario, mainly you have to play with overflow and word-wrap properties.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search