表未调整大小以适合div

Question

为uni设计一个html网站，必须有一个或多个表，这对于使用html和css来说是很新的，所以请原谅我D：

想要一个半不透明的盒子来放置诸如文本，标题，表格等之类的东西，以便随页面调整大小，内容仍然合适。使用div来做到这一点。
问题是，表格将无法调整大小以适合方框甚至页面。

这是盒子的css：

.box {
    display: inline-block;
    width: 70%;
    padding: 10px;
    background-color: rgba(229, 191, 180, 0.7);
    border: 0.5px solid #93586a;
    margin: 10px;
}

这是表格的css

table {
    border-collapse: collapse;
    margin: 10px;
    display: inline;
    width: 50%;
    color: #93586a;
    font-family: "Helvetica";
}

th {
    border: 0.5px solid #93586a;
    background-color: E1AEA4;
    text-align: center;
    color: #93586a;
    font-family: "Helvetica";
    font-style: italic;
    padding: 5px;
}

td {
    border: 0.5px solid #93586a;
    background-color: #E7BEB6;
    text-align: left;
    color: #93586a;
    font-family: "Helvetica";
    padding: 5px;
}

如果有人可以向我解释如何实现这一目标，我将非常感激。抱歉，如果措辞不好。