How to put text on the next row in a TD in a Table

Asked Dec 30 '19 at 13:28

Active Dec 30 '19 at 15:26

Viewed 187 times

Working on this todolist. https://jsfiddle.net/n6j8Lrmy/

So, the problem I'm encountering is when I add a new todo with a new table. If the description or any cell is too long, it's gonna overflow into the next cell.

How can I make it so that when the text is too long, it goes on the next line but it doesn't distort the positioning of table heads or other cells?

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">Title</th>
      <th scope="col">Priority</th>
      <th scope="col">Description</th>
      <th scope="col">Date</th>
      <th scope="col">Remove</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Do HomeWork</th>
      <td>5</td>
      <td>Do math homework</td>
      <td>15-01-2020</td>
      <td>X</td>
    </tr>
  </tbody>
</table>

edited Dec 30 '19 at 15:26

Frazer

1,049
1
10
16

asked Dec 30 '19 at 13:28

octaviandd

1

check out this: https://stackoverflow.com/questions/1057574/html-td-wrap-text – Ian Middelkamp Dec 30 '19 at 13:37
Also, consider adding a tr element to the existing table instead of adding an entirely new table – Ian Middelkamp Dec 30 '19 at 13:38
Thanks, I want them to be in different tables because I'll have new functions coming out of them. – octaviandd Dec 30 '19 at 13:48
look into table-layout:fixed – Dmitri Tsoy Dec 30 '19 at 14:21

How to put text on the next row in a TD in a Table

0 Answers0