类似于“table-layout：fixed”但只限于一个表格栏 [英] Something like "table-layout:fixed" but only for one table-column

问题描述

我有有一个非常大的值的问题的一种细胞内：

43003A005C00570069006E0064006F00770073005C00730079007300740065006D00330032005C0076006D00470075006500730074004C00690062002E0064006C006C00000043003A005C00500072006F006700720061006D002000460069006C00650073005C0056004D0077006100720065005C0056004D007700610072006500200054006F006F006C0073005C0076006D0053007400610074007300500072006F00760069006400650072005C00770069006E00360034005C0076006D0053007400610074007300500072006F00760069006400650072002E0064006C006C000000

它所做的是整个表格变得比它应该更大。

我现在添加了 table-layout：fixed 到表中，整个表得到调整大小，不仅仅是具有这个值的列。

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

  / ** 
 *使用查询中的值返回表
 * / 
函数tableizeQryRes（$ arr）{
 $ isFirst = true; 
 $ tbl ='< table width =100％border =1cellpadding =2frame =boxrules =allstyle =table-layout：fixed>'; 
 foreach（$ arr as $ key => $ val）{
 // echo $ key; 
 if（$ isFirst）{
 $ tblHeader ='< tr align =centervalign =middle>< td>< / td>'; 
 $ tblBody ='< tr>< td>'。$ key。'< / td>'; （$ 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>'; （$ 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％;连字符：auto>'; 
 echo $ tbl; 
 echo'< br />'; 
 echo'< br />'; 
 echo'< / div>'; 
} 
  

如果我添加了某物，例如 style =word-wrap：break-word; width：40％和 table-layout：fixed 其他细胞也是固定的，不再调整。



顺便说一句：所有列的长度都是可变的000行）。前5列很小，只有6个，其中一个包含一个消息，有时候会有一个空格，有些时候没有。 CSS3文本模块允许您打破长单词，以便使用 word-wrap：break-word 来环绕多行。然而，在某些情况下可能会发生的情况是，
在一个长词之前是一个很大的白色空白，因为一个长的非破坏性单词
从一个新行开始，即使短小的单词可以跟随这个长字。

一个解决方法是使用 white-space：pre-wrap 和 word-break：break-all 这将防止长长的空格在长时间不间断的单词之前形成。

然而，不利的一面是，一些小字可能会绕到第二行。

您有两个选项， word-wrap

code>方法，它可以在一个很长的非断字之前留下很大的空白，或者可以留下一些小字的$ whtie-space / word-break 方法$

我认为这就像使用CSS3一样。其他任何内容都需要JavaScript
辅助解决方案。

  table {border：1px dotted blue;表格布局：固定; width：100％;} table td {border：1px dashed blue; vertical-align：top;} table td.wrapping {width：350px;白色空间：预包装; word-break：break-all}  

< table> < TR> < td>包含一些文字的常规表格单元< / td> < TD类=包装>在文本andaverylongword一些短字来填充线43003A005C00570069006E0064006F00770073005C00730079007300740065006D00330032005C0076006D00470075006500730074004C00690062002E0064006C006C00000043003A005C00500072006F006700720061006D002000460069006C00650073005C0056004D0077006100720065005C0056004D007700610072006500200054006F006F006C0073005C0076006D0053007400610074007300500072006F00760069006400650072005C00770069006E00360034005C0076006D0053007400610074007300500072006F00760069006400650072002E0064006C006C000000和结束℃的几句; / TD> < / table>

I have the problem that I have a very big value inside one cell:

43003A005C00570069006E0064006F00770073005C00730079007300740065006D00330032005C0076006D00470075006500730074004C00690062002E0064006C006C00000043003A005C00500072006F006700720061006D002000460069006C00650073005C0056004D0077006100720065005C0056004D007700610072006500200054006F006F006C0073005C0076006D0053007400610074007300500072006F00760069006400650072005C00770069006E00360034005C0076006D0053007400610074007300500072006F00760069006400650072002E0064006C006C000000

What it does is that the whole table gets bigger than it should.

I now added table-layout:fixed to the table, the whole table gets resized, not only the column with this value.

What I want is that all other columns have their size they need, but only that the last one should be rearranged (use multiple lines).

/**
  * 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>';
}

If I add sth. like style="word-wrap:break-word; width:40%" and table-layout:fixed the other cells get also fixed and don't adjust anymore.

BTW.: All the columns are variable in length (and there are about 150 000 rows). The first 5 columns are small, only the 6. one contains a message, sometimes with a space, somethimes without.

解决方案

The CSS3 text module allows you to break long words so that they wrap around multiple lines using word-wrap: break-word. However, what can happen in some cases is that there is a large white gap to the right before a long word since a long non-breaking word starts on a new line, even though short words can follow the long word.

One way around this is to to use white-space: pre-wrap and word-break: break-all which will prevent long white spaces from forming right before a long non-breaking word.

However, the down side is that some small words may wrap around onto a second line.

You have two options, the word-wrap method which can leave large gaps before a long non-breaking word, or the whtie-space/word-break method that can leave some small words wrapped around two lines.

I think this is as far as you can go with CSS3. Anything else will require some JavaScript assisted solution.

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>

这篇关于类似于“table-layout：fixed”但只限于一个表格栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！