如何保持卡片内的内容？

Question

我制作了我的第一个 Web 项目，并且作为第一个项目，我正在做 To-Do 应用程序。我也在学习做响应式网站，但我遇到了一个问题。

当我添加的内容大于表格时，它会从卡片中消失。我想要的是尽管内容更大，但我想留在表格内。

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

我希望你们能就这个问题向我提出解决方案，并就我正在制作的网站提出其他建议。我将不胜感激。

Answer 1

桌子很难装上容器。他们希望为他们拥有的内容占用尽可能多的空间。

看看这个小例子：

<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/

如您所见，表格标题溢出了我的小 div。与您的页面上发生的事情相同。

请查看这篇文章以获取有关如何强制表格适合容器的信息： 100% width table overflowing div container

您也可以考虑将表格字体变小。

Answer 2

好吧，这可以简单地解决：

使用{{ all_item.content }} 将width 和overflow 添加到td。

应该是这样的：

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

---

我在您的代码中发现的一个错误是您的 form 在 table 之间切换。

这不是有效的 HTML，因为 html 元素应正确嵌套，即处于正确的层次结构中。

---

希望我能帮上忙