如何保存卡片中的内容？

Question

我做了我的第一个网络项目，作为第一个项目，我做了To-Do应用程序。我也在学习如何在响应型网站上做到这一点，但我遇到了一个问题。

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

车身{背景色：#6ea1ff/*#f7 ef3*/字体系列：；}/*导航栏*/.navbar（导航栏）{填充：25px；}.navbar-品牌{字体大小：；}.d-柔性{右边边距：680px；宽度：30%；}#添加-btn{宽度：80px；}/*表格*/.容器{位置：相对；底部：-75px；宽度：65%；字体系列：；}.卡{背景色：#0d2e72；}.卡片头{边界：无；}#收割台{字体大小：25px；文本对齐：居中；颜色：白色；}#tr-表{宽度：100px；}#文本-左侧{宽度：10%；}#文本-右侧{宽度：15%；左侧填充：40px；}#文本居中{文本对齐：居中；}#btn-删除{宽度：80px；左边边距：35px；}/*页脚*/页脚{位置：固定；左：0；底部：0；宽度：100%；填充：10px；背景色：#26272b；颜色：白色；文本对齐：居中；}@媒体屏幕和（最大宽度：667px）{/*导航栏*/.navbar（导航栏）{填充：15px；高度：自动；}.d-柔性{位置：相对；左：87px；}.navbar-品牌{位置：相对；左：65px；}/*THe表格*/.容器{宽度：100%；}}

{%extends“html/main.html”%}{%load静态%}{%block内容%}<nav class=“navbar navbar-dark bg-dark”><div class=“container-fluid”>待办应用程序</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…”/>添加</form></div></nav><div class=“container”><div class=“jumbotron”><div class=“card”><div class=“card-header”><p id=“header”><strong>任务</div><div class=“card-body”><table class=“table table-dark table-hover table-bordered”><头部><tr id=“tr-table”><th id=“text left”>个项目</th>项目<th id=“text right”>行动</th></tr></thead><t车身>{%forall_items%}中的all_item<tr>{{forloop.counter}}<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”>删除</td></form></tr>{%endfor%}</tbody></表格></div></div></div></div><页脚><bhr><p>2021年&副本</p></footer>{%endblock%}

我希望你们能给我一个关于这个问题的解决方案，以及关于我制作的网站的其他建议。如果有任何回应，我将不胜感激。

Answer 1

这个问题可以简单地解决：

添加宽度和溢出到td（时域）使用{{所有项目内容}}.

它应该如下所示：

.classname-for-the-td/*或#id*/{宽度：100%；/*采用父元素的100%宽度*/溢出：滚动；}

---

我可以在您的代码中发现一个错误，即您的形式在桌子.

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

---

希望我能帮上忙

Answer 2

桌子很难安装容器。他们想要为他们所拥有的内容占用尽可能多的空间。

看看这个小例子：

<div class='mycontainer'><表格><头部><tr id=“tr-table”>项目数量项目<th id=“text right”>行动</th></tr></thead></表格></div>.my容器{宽度：100px；边框：1px纯金；}

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

正如你所看到的，表格标题溢出了我的小div。同样的事情也发生在你的页面上。

请查看此帖子，了解如何将桌子放入容器中：100%宽度表格溢出div容器

您还可以考虑缩小表格字体。