How to keep the content inside the card?

Question

I making my first web project, and as a first project im doing To-Do app. Im also learning to do it responsive website, but i have stuck in a problem.

When I add a content larger then the table it goes out of the card. What i want is despite that the content is larger i want to stay inside the table.

body {
    background-color: #6ea1ff; /*#3f7ef3;*/
    font-family:;
    }

/* The navbar */

.navbar {
    padding: 25px;
}

.navbar-brand {
    font-size:;
}

.d-flex {
  margin-right: 680px;
  width: 30%;
}

#add-btn {
    width: 80px;
}


/* THe table */
.container{
  position: relative;
  bottom: -75px;
  width: 65%;
  font-family:;
}

.card {
    background-color: #0d2e72;
}

.card-header {
    border: none;
}

#header {
    font-size: 25px; 
    text-align: center; 
    color: white;
}


#tr-table {
    width: 100px;
}

#text-left {
    width: 10%;
}

#text-right {
    width: 15%;
    padding-left: 40px;
}

#text-center {
    text-align: center;
}


#btn-delete {
    width: 80px;
    margin-left: 35px; 
}






/* THE footer */


footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px;
    background-color: #26272b;
    color: white;
    text-align: center;

}


@media screen and (max-width: 667px) {
    /* The navbar */
    
    .navbar {
        padding: 15px;
        height: auto;
    }

    .d-flex {
        position: relative;
        left: 87px;
    }

    .navbar-brand {
        position: relative;
        left: 65px;
    }

    /* THe table */

    .container{
        width: 100%;
    }
}

{% extends 'html/main.html' %}
{% load static %}

{% block content %}


<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><b>TO DO APPLICATION</b></a>
      <form class="d-flex" action="add_todo/" method="post">
        {% csrf_token %}
        <input class="form-control me-2" type="text" name="content" placeholder="type here..."/>
        <button id="add-btn" class="btn btn-outline-success" type="submit">Add</button>
      </form>
  </div>
</nav>

<div class="container">
  <div class="jumbotron">
    <div class="card">
      <div class="card-header">
        <p id="header"><strong>TASKS TO DO</strong></p>       
      </div>
      <div class="card-body">
        <table class="table table-dark table-hover table-bordered">
          <thead>
            <tr id="tr-table">
              <th id="text-left">Nr. ITEMS</th>
              <th id="text-center">ITEMS</th>
              <th id="text-right">ACTIONS</th>
            </tr>
          </thead>  
          <tbody>
            {% for all_item in all_items%}
              <tr>
                <th scope="row"> {{ forloop.counter }} </th>
                <td style="font-family: sans-serif; font-size: 17px; padding-left: 25px; ">{{ all_item.content }}</td>
                <form action="delete_todo/{{all_item.id}}/" method="post">
                  {% csrf_token %}
                  <td class="text-right">
                    <button id="btn-delete" class="btn btn-outline-danger">Delete</button> 
                  </td>
                </form>
             </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<footer>
  <bhr>
  <p> 2021 &copy</p>
</footer>

{% endblock %}

I hope you guys would suggest me a solution about this problem and other suggestion about the website that im making. I would appreciate any response.

score 1 · Answer 1 · answered Feb 13 '21 at 13:20

Well, this can be solved simply:

Add width and overflow to the td with the {{ all_item.content }}.

It should look like this:

.classname-for-the-td /* or #id */ {
width: 100%; /* takes 100% width of parent element */
overflow: scroll;
}

An error that I can make out in your code is that your form cuts between the table.

This is not valid HTML, as html elements should be properly nested, i.e., be in a proper hierarchy.

Hope I could help

score 0 · Answer 2 · answered Feb 13 '21 at 12:47

Tables have a hard time fitting containers. They want to take as much space as they need for the content they have.

Check this small example out:

<div class='mycontainer'>
<table>
  <thead>
    <tr id="tr-table">
      <th id="text-left">Nr. ITEMS</th>
      <th id="text-center">ITEMS</th>
      <th id="text-right">ACTIONS</th>
    </tr>
  </thead>   
</table>
</div>

.mycontainer{
  width: 100px;
  border: 1px solid gold;
}

https://jsfiddle.net/8ukpfedt/16/

As you can see the table headers overflow my small div. The same thing that is happening on your page.

Please check out this post for information on how to force the table to fit inside the container: 100% width table overflowing div container

You can also consider making the table font smaller.

How to keep the content inside the card?

2 Answers2