Html 在表单元格中换行字，但表布局固定，使列大小相等

在HTML表格中，有时我的单元格中有长单词。所以我需要打断一些词，如果它们溢出了它的区域。 以下问题显示了如何拆分表格单元格： 建议使用这种css样式：style=wordwrap:break-word；表布局：固定；宽度：100%

但如果我使用tablelayout:fixed，我的列的大小将变得相同。但在我的例子中，表的宽度是100%，若表是固定的，那个么列的宽度是相等的。但这会占用页面太多的高度

我的小提琴：

我需要什么？ -我的表有两列，我希望第二列尽可能窄。 -第二列的宽度不应超过列的名称。 -列名不应被包装名字不能被包装起来。 -第一列应该是宽的。我不喜欢固定列宽，如%60、%70等。但如果这是一个解决方案，我可以使用固定列宽，但必须考虑响应性。 -表应该是响应的。我将在移动布局中使用此表。 -如果单词超过单元格宽度，则必须严格包装单词。例如，若单元格最多可容纳40个字符，而word为45个字符，则可以将word拆分为41个字符。性格是

在小屏幕和大屏幕中，输出应如下所示：

代码：

---

似乎在HTML和CSS中，如果不生成固定宽度的表列并使用table layout:fixed，就无法在表单元格中自动分词。而且，在使用table layout:fixed时，不能指定一列的宽度与需要的一样窄，而另一列将占据所有剩余的部分

然而，有一个相当简单的JavaScript解决方案，尽管对于一个大的表，它可能会导致效率低下和从初始布局到修改后的布局的闪现。最初您不会设置固定布局，也不会设置列宽，而是设置总宽度为100%。因此，您可以让浏览器在自动布局中格式化表格，以便第二列的宽度与假设另一列中有足够内容所需的宽度相同，正如我们在这里所期望的那样。然后，您只需获取第二列的宽度，并在标题单元格上显式设置它，然后将table layout设置为fixed

示例代码：

<style>
#mytable {
    word-wrap: break-word;
    width: 100%;
}
</style>
...
<table id="mytable"
...
<script>
window.onload = function() {
  var t = document.getElementById('mytable');
  var th2 = t.rows[0].cells[1];
  th2.style.width = th2.clientWidth + 'px';
  t.style.tableLayout = 'fixed';
}
</script>

---

另外，我仍然认为这是一种完全错误的方法，除非细胞内容是某种非常特殊的代码，比如DNA序列，它在任何时候都可能被破坏。对于人类语言中的任何正常和异常文本，应使用连字符或其他特定于语言的分词。对于大多数代码表达式，如果需要，应指出允许的断点，例如使用标记或零宽度无中断空格。

固定表格布局或任意单词都不是正确的方法。但除此之外，问题并没有具体说明真正应该发生什么：表格应该如何格式化，以及内容中可以接受的换行点是什么。对于任何正常的文本内容，特定于语言的断字是正确的方法。这就是你想要的吗need@JukkaK.Korpela谢谢你们的评论，我编辑了这个问题。我想文字在任何时候都可能被打断。我担心的是任何单词都不应该溢出列。。。如果第一列使用固定列宽，第二列将尽可能窄，是否有更简单的解决方案？

<style>
#mytable {
    word-wrap: break-word;
    width: 100%;
}
</style>
...
<table id="mytable"
...
<script>
window.onload = function() {
  var t = document.getElementById('mytable');
  var th2 = t.rows[0].cells[1];
  th2.style.width = th2.clientWidth + 'px';
  t.style.tableLayout = 'fixed';
}
</script>