包裝表格單元格中的單詞，但表格佈局固定使列大小相等

Question

在我的HTML表格中，有時我的單元格中有很長的單詞。所以如果他們的區域溢出，我需要打破一些詞彙。
這個問題說明了如何打破錶格單元格：建議Word-wrap in an HTML table
這個CSS樣式：style="word-wrap: break-word; table-layout: fixed; width: 100%"

但是，如果使用表格的佈局：固定的，我的專欄等於大小。但在我的情況下，表格的寬度爲100％，如果表格固定，那麼列的寬度相等。但是這需要從頁面的高度。

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

我需要什麼？
- 我的表格有2列，我希望第二列越窄越好。
- 第二列的寬度不應超過列的名稱。
- 列名不應包裝。 < th>名稱不能包裝。
- 第一欄應寬。我不喜歡固定列寬，如％60，％70等。但如果是解決方案，我可以使用固定列寬，但必須考慮響應性。
- 表應該是響應式的。我將在移動版面中使用此表格。
- 如果單詞超出單元格寬度，則必須嚴格包裝單詞。例如，如果單元格可以佔用最多40個字符並且單詞是45個字符，則無論字符是什麼，單詞都可以被打破。

輸出應該是這樣的小，大屏幕：

代碼：

.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>標籤或零寬度不間斷空格。