html - 在表格单元格中包装单词，但固定表格布局使列大小相等

Question

在我的 HTML 表格中，有时我的单元格中有很长的单词。所以如果他们溢出它的区域，我需要打破一些词。
此问题显示如何拆分表格单元格:Word-wrap in an HTML table
推荐这种 css 样式:style="word-wrap: break-word; table-layout: fixed; width: 100%"

但是如果我使用 table-layout:fixed，我的列会变得大小相等。但在我的例子中，表格的宽度是 100%，如果表格是固定的，那么列平均共享宽度。但这占用了页面太多的高度。

我的 fiddle :http://jsfiddle.net/mavent/Y54s9/17/

我需要什么？
- 我的表格有 2 列，我希望第二列尽可能窄。
- 第二列的宽度不应超过列名。
- 不应换行列名。 < th > 名称不得换行。
- 第一列应该很宽。我不喜欢固定列宽，如 %60、%70 等。但如果这是一个解决方案，我可以使用固定列宽，但必须考虑响应能力。
- 表格应该是响应式的。我将在移动布局中使用此表。
- 如果单词超过单元格宽度，则必须严格换行。例如，如果单元格最多可以包含 40 个字符，而单词是 45 个字符，则单词可以被打断，无论 41. 字符是多少。

输出在小屏幕和大屏幕上应该是这样的:

代码:

.myclass1 {
    white-space: normal;
}

.myclass2 {
    word-wrap: break-word;
    table-layout: fixed;
}

<table class="table table-striped table-condensed dataTable myclass1" id="mytable">
    <thead>
        <tr>
            <th class="sorting">header1</th>
            <th class="sorting">header2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td class="">
<span class="">Some words are generally short and easy to read
<a href="#"><i class="glyphicon glyphicon-share-alt"></i></a></span>

            </td>
            <td class="">
<span><button class="btn btn-primary btn-xs">123</button></span>

            </td>
        </tr>

    </tbody>
</table>

<hr><hr>

    <table class="table table-striped table-condensed dataTable myclass1" id="mytable">
    <thead>
        <tr>
            <th class="sorting">header1</th>
            <th class="sorting">header2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td class="">
<span class="">Some words are generally short and easy to read, butsomewordsareĞĞÜÜveryverylongIŞÖlikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<a href="#"><i class="glyphicon glyphicon-share-alt"></i></a></span>

            </td>
            <td class="">
<span><button class="btn btn-primary btn-xs">123</button></span>

            </td>
        </tr>
        <tr>
            <td>
<span>Some words are generally short and easy to read, butsomewordsare veryverylonglikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<a href="#"><i class="glyphicon glyphicon-share-alt"></i></a></span>

            </td>
            <td class="">
<span><button class="btn btn-primary btn-xs">225</button></span>

            </td>
        </tr>
    </tbody>
</table>

<hr><hr>

    <table class="table table-striped table-condensed dataTable myclass2" id="mytable">
    <thead>
        <tr>
            <th class="sorting">header1</th>
            <th class="sorting">header2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td class="">
<span class="">Some words are generally short and easy to read, butsomewordsareĞĞÜÜveryverylongIŞÖlikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<a href="#"><i class="glyphicon glyphicon-share-alt"></i></a></span>

            </td>
            <td class="">
<span><button class="btn btn-primary btn-xs">123</button></span>

            </td>
        </tr>
        <tr>
            <td>
<span>Some words are generally short and easy to read, butsomewordsare veryverylonglikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<a href="#"><i class="glyphicon glyphicon-share-alt"></i></a></span>

            </td>
            <td class="">
<span><button class="btn btn-primary btn-xs">225</button></span>

            </td>
        </tr>
    </tbody>
</table>

Answer 1

似乎使用 HTML 和 CSS，如果不制作固定宽度的表格列并使用 table-layout: fixed，就不能在表格单元格中导致自动分词).并且您不能指定一列的宽度与它需要的一样窄，而另一列占据所有其余部分(当使用 table-layout: fixed 时)。

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

示例代码:

<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 序列，它真的可以在任何时候被破坏。对于人类语言中任何正常和异常的文本，都应该应用断字或其他语言特定的分词。对于大多数代码表达式，如果需要，应指明允许的断点，例如与 <wbr>标记或零宽度不间断空格。