Text overflow issue in table

Question

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;
}

ever considered using the native css flex-box property? It does wonders with minimal adjustments. here's my favorite documentation — Sarkis
– Sarkis, Commented Dec 21, 2024 at 17:50

Bhavesh Jha · Accepted Answer · 2024-12-19 07:28:12Z

1

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.

answered Dec 19, 2024 at 7:28

Bhavesh Jha

478 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Plevko · Accepted Answer · 2024-12-20 15:24:31Z

0

Here is a working example of CSS that fixes the problem. The key fix is adding "width: 100%" to the ".pkgtable li" element. This ensures that the list items stay contained within their table cell and prevents any overflow.

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

.pkgtable th,
td {
  vertical-align: top;
  border: 1px solid #ddd;
  padding: 10px;
}

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

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

On this image you can see the final result:

answered Dec 20, 2024 at 15:24

Peter Plevko

3131 silver badge11 bronze badges

Collectives™ on Stack Overflow

Text overflow issue in table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related