Question

在我的HTML表格中，有时候我的单元格中有很长的单词。所以如果它们溢出其区域，我需要打破一些话这个问题显示了如何打破表格单元格：Word-wrap in an HTML table
建议使用此css样式：style="word-wrap: break-word; table-layout: fixed; width: 100%"

但是如果我使用table-layout：fixed，我的列会变得相同。但在我的情况下，表的宽度是100％，如果表是固定的，那么列的份额相等。但这从页面上占据了太多的高度。

我的小提琴：http://jsfiddle.net/mavent/Y54s9/17/

我需要什么？
- 我的表有2列，我希望第二列尽可能窄 - 第二列的宽度不应超过列的名称 - 不应包裹列名称。＆LT; th>名字不得包裹。
- 第1列应宽。我不喜欢固定列宽，如％60，％70等。但如果它是一个解决方案，我可以使用固定列宽，但必须考虑响应性。
- 表应该是响应式的。我将在移动布局中使用此表 - 如果单词超出单元格宽度，则必须严格包装Word。例如，如果单元格最多可以包含40个字符，单词是45个字符，那么无论41个字符是什么，单词都可以被破坏。

在小屏幕和大屏幕中输出应如下所示：
enter image description here

enter image description here

代码：

.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>

P.S。我仍然认为这是一个错误的方法，除非细胞内容是一些非常特殊的代码，如DNA序列，可以在任何时候真正被打破。对于人类语言中的任何正常和异常文本，应该应用连字符或其他特定于语言的单词划分。对于大多数代码表达式，如果需要，应指出允许的断点，例如：使用<wbr>标记或零宽度不间断空格。

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

1 个答案: