设置表格列的宽度，以便内容不会泄漏到外面并且表格的大小在某个点之后整体减小

问题描述

我有一个包含两列（文件和用户）的表。相对于整个表格宽度，我希望文件列宽约为 30%，用户列宽为 70%。但是，这些列的宽度会根据放入的内容增加或减少 - 它们没有设置为 30% 或 70%。例如，如果我在 Files 中放置一段较长的文本，则该列的宽度将变为 40% 左右，而第二列将变为 60% 左右。

此外，如果我调整窗口大小并使其变小，表格和内容会泄漏。当那个点发生时，我希望整个表格变小而不是从页面中泄漏出来。

有人可以帮我解决这个问题吗？不确定如何创建它。

到目前为止，这是我的 html 和 css：

HTML：

,

CSS：

<div class="panel-body">
    <br>
    <div class="outputDiv">
        <table id="sharedOthers">
            <thead>
                <tr class="headings">
                    <th class="files">Files</th>
                    <th class="users">Users</th>
                </tr>
            </thead>
            <tbody id="bodyOthers">
                <tr id="rowOthers">
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

这是现在的样子：

解决方法

我不知道我是否正确理解了您的问题，但是如果您使用了 css 并将表格的 th 标签分别放在 30% 和 70% 处。

,

更新：我最终解决了这个问题。在 css 中，我在 table 下添加了 table-layout: fixed;，在 td,th 下添加了 word-wrap: break-word;。希望能帮助任何人解决这个问题。