6

I'm trying to set the maximum width of a table, but it doesn't seem to be working. If a word inside the table is too long, it automatically expands the width of the table. How do I stop that from happening, and instead have the word that's too long go to the next line?

<style>table {
  max-width: 300px;
}

table,
td {
  border: 1px solid red;
}

div {
  border: 1px solid blue;
  word-wrap: break-word;
}

</style>
<table>

  <tr>
    <td>
      <div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
      </div>
    </td>
  </tr>

</table>

1

4 Answers 4

15

If you want to make your max-width to work, you need to set the CSS property table-layout: fixed; on the table and use width, not max-width.

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

0
0

Add the following rule your css section.

div{
    overflow-wrap: break-word;
    max-width: 300px;
0

word-wrap: break-word; will work if you have width assigned to the container, you are applying this property to. Thus, you will have to assign width:100px; or desired width to div tag.

<style type="text/css">
    div {
         width: 100px; /* this will limit the length of the word to 100px */
         border: 1px solid blue;
         word-wrap: break-word;
        }
</style>
0

Putting max-width inside the div solves the problem.

<style>
table,td {
border: 1px solid red;
}
div {
border: 1px solid blue;
word-wrap: break-word;
max-width: 300px;
}
</style>
<table>

<tr>
<td>
<div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello </div>
</td>
</tr>

</table>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.