html - 类似于 "table-layout:fixed"但仅适用于一个表列

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 其他单元格也得到固定，不再调整。

顺便说一句:所有列的长度都是可变的(大约有 150 000 行)。前 5 列很小，只有 6 列包含消息，有时有空格，有时没有。

Answer 1

CSS3 文本模块允许您使用 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>