像“table-layout：fixed”之類的東西，但僅限於一個table-column

Question

我有一個問題，我在一個單元格中有一個非常大的值：

43003A005C00570069006E0064006F00770073005C00730079007300740065006D00330032005C0076006D00470075006500730074004C00690062002E0064006C006C00000043003A005C00500072006F006700720061006D002000460069006C00650073005C0056004D0077006100720065005C0056004D007700610072006500200054006F006F006C0073005C0076006D0053007400610074007300500072006F00760069006400650072005C00770069006E00360034005C0076006D0053007400610074007300500072006F00760069006400650072002E0064006C006C000000

它的作用是整個表格變得比它應該的大。

我現在添加了table-layout:fixed到表中，整個表被調整大小，而不僅僅是具有此值的列。

我想要的是所有其他列都有他們需要的大小，但只有最后一列應該重新排列（使用多行）。

/**
  * Returns a table with the values from a query
  */
function tableizeQryRes($arr) {
  $isFirst=true;
  $tbl = '<table width="100%" border="1" cellpadding="2" frame="box" rules="all" style="table-layout:fixed">';
  foreach ($arr as $key => $val) {
    //echo $key;
    if ($isFirst) {
      $tblHeader = '<tr align="center" valign="middle"><td></td>';
      $tblBody = '<tr><td>'.$key.'</td>';
      foreach ($val as $sub_key => $sub_val) {
        if ($sub_key == "Msg") {
          $tblHeader .= '<td style="word-wrap:break-word; width:40%">'.$sub_key.'</td>';
          $tblBody .= '<td style="word-wrap:break-word; width:40%">'.$sub_val.'</td>';
        } else {
          $tblHeader .= '<td>'.$sub_key.'</td>';
          $tblBody .= '<td>'.$sub_val.'</td>';
        }
      }
      $tblHeader .= '</tr>';
      $tblBody .= '</tr>';
      $tbl .= $tblHeader;
      $tbl .= $tblBody;
      $isFirst=false;
    } else {
      $tbl .= '<tr><td>'.$key.'</td>';
      foreach ($val as $sub_key => $sub_val) {
        if ($sub_key == "Msg") {
          $tbl .= '<td style="word-wrap:break-word; width:40%">'.$sub_val.'</td>';
        } else {
          $tbl .= '<td>'.$sub_val.'</td>';
        }
      }
      $tbl .= '</tr>';
    }
  }
  $tbl .= '</table>';

  echo '<div style="max-width:100%; hyphens:auto">';
  echo $tbl;
  echo '<br/>';
  echo '<br/>';
  echo '</div>';
}

如果我加上某事。 喜歡style="word-wrap:break-word; width:40%"和table-layout:fixed其他單元格也固定不再調整。

BTW。：所有列的長度都是可變的（大約有150 000行）。 前5列很小，只有6.列包含一條消息，有時帶有空格，有些則沒有。

Answer 1

CSS3文本模塊允許您打破長單詞，以便它們使用word-wrap: break-word行包含多行word-wrap: break-word 。 然而，在某些情況下可能發生的情況是，在一個長詞之前右邊有一個很大的白色間隙，因為一個長的非破壞詞開始於一個新行，即使短詞可以跟隨長詞。

解決這個問題的一種方法是使用white-space: pre-wrap和word-break: break-all ，它可以防止長長的空格在長的非破壞詞之前形成。

然而，不利的一面是，一些小詞可能會纏繞到第二行。

你有兩個選擇， word-wrap方法可以在一個長的非破壞詞之前留下大的空隙，或者whtie-space/word-break方法可以留下一些包含兩行的小詞。

我認為這就是你可以使用CSS3。 其他任何東西都需要一些JavaScript輔助解決方案。

 table { border: 1px dotted blue; table-layout: fixed; width: 100%; } table td { border: 1px dashed blue; vertical-align: top; } table td.wrapping { width: 350px; white-space: pre-wrap; word-break: break-all } 

 <table> <tr> <td>a regular table cell with some text</td> <td class="wrapping">some short words in the text andaverylongword to fill up the line 43003A005C00570069006E0064006F00770073005C00730079007300740065006D00330032005C0076006D00470075006500730074004C00690062002E0064006C006C00000043003A005C00500072006F006700720061006D002000460069006C00650073005C0056004D0077006100720065005C0056004D007700610072006500200054006F006F006C0073005C0076006D0053007400610074007300500072006F00760069006400650072005C00770069006E00360034005C0076006D0053007400610074007300500072006F00760069006400650072002E0064006C006C000000 and a few words at the end </td> </tr> </table> 

Answer 2

嘗試在包含元素上設置word-wrap:break-word 。

示例： jsFiddle

HTML：

<table>
    <tr>
        <td>Column One</td>
        <td>Column Two</td>
        <td class="wrap">43003A005C00570069006Eetc...</td>
    </tr>
</table>

CSS：

table {
    table-layout:fixed;
    width:100%;
}

.wrap {
    width:40%;
    word-wrap:break-word;
}

Answer 3

在firefox上你必須使用“max-width”而不是“width”，否則它將在“layout-table：auto”的表中被忽略。

所以，如果你不想使用“layout-table：auto”，你可以將這樣的類分配給你想要限制的列。

.wrap {
    word-wrap: break-word;
    max-width: 100px;
}