HTML Table - limit <td> data overflow

Question

I have a simple HTML Table:

table,
th,
td {
  border: 1px solid black;
}

<h1>The table width attribute</h1>

<table width="400">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

when i enter into lots of data (for example: instead of 100$ i enter 1000000000000000$) it keeps spreading. i tried to limit it's width to like 10px and overflow-y auto and didnt work...

any idea how i can limit the amout of chars inside and auto enter?

Thanks in advance.

would you mind accepting my answer if you think it worked for you? — Manjuboyz
– Manjuboyz, Commented Mar 16, 2020 at 6:38

Manjuboyz · Accepted Answer · 2020-03-16 06:33:23Z

2

You can use something like this.

The width you gave to your table was 400 so if you can do that then you should limit it.

there is CSS property called overflow-wrap this will help you to bring the extra content in that block.

td {
  max-width:20px;
 overflow-wrap: break-word;
}

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>The table width attribute</h1>

<table width="400">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$8000000000000000000000000000000000000000000000000000000000000</td>
  </tr>
</table>
</body>
</html>

OR

Another option is to give a selector class to td and provide css property to only that class, that should also work for you.

edited Mar 16, 2020 at 6:33

answered Mar 16, 2020 at 6:27

Manjuboyz

7,1043 gold badges26 silver badges44 bronze badges

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

1 Comment

Current Redemption Over a year ago

@Manjuboyz- Thanks a lot! seems like that max-width did the trick :)

Saleem · Accepted Answer · 2020-03-16 06:25:32Z

0

You can use text-overflow: ellipsis; or refer to w3schools

answered Mar 16, 2020 at 6:25

Saleem

1,05914 silver badges27 bronze badges

Collectives™ on Stack Overflow

HTML Table - limit <td> data overflow

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related