2

我有一个 HTML 表格，其中包含 3 个“组”列，左侧、中间和右侧。

+---------------------------------+
| L-1 | L-2 | 中号 | R1 | R2 |
+-----+-----+------------+----+----+
| x | z | 啊啊啊... | 1 | 2 |
| 是 | w | bbbbbbb... | 3 | 4 |
+-----+-----+------------+----+----+

当中间（“M”）列中有一个很长的字符串时，我想将表格限制在浏览器窗口的宽度内。

我尝试在本专栏中使用 CSS 分词，如wordwrap a very long string中所述。

下面是 HTML（示例）。CSS 包含我关于这应该如何（但显然不是）工作的想法。

我究竟做错了什么？

<html>
 <头部>
  <样式类型='文本/css'>
   table { /* 这里什么都没有 - 表是块的，所以应该自动扩展到尽可能大而不引起滚动条吗？*/ }
   .left { 文本对齐：中心；}
   .right { 文本对齐：右；}
   .middle { 文本对齐：左；宽度：100%；/* 将此列扩展到表中的最大大小？*/}
   .wrap { word-wrap:break-word; 宽度：100%；/* 用完这个 div 所在的整个单元格？*/ }
  </style>
 </head>
 <正文>
  <表格>
   <tr>
    <th class=left>L-1</th>
    <th class=left>L-2</th>
    <th class=middle>M</th>
    <th class=right>R-1</th>
    <th class=right>R-2</th>
   </tr>
   <tr>
    <td class=left>角</td>
    <td class=left>讨价还价</td>
    <td class=middle><div class=wrap>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div></td>
    <td class=right>glyp</td>
    <td class=right>gof</td>
   </tr>
  </table>
 </正文>
</html>

现在的结果是没有进行自动换行，而是表格意外地向最右侧射出，并在浏览器窗口中导致滚动条。

4

3 回答 3

1

这似乎完美地工作：

<!DOCTYPE html>
<html>
 <head>
  <style type='text/css'>
   th,td { vertical-align:top; padding:0 5px; }
   .left { text-align:center; }
   .right { text-align:right; }
   .middle { text-align:left; width:100%; }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th class=left>L-1</th>
    <th class=left>L-2</th>
    <th class=middle>M</th>
    <th class=right>R-1</th>
    <th class=right>R-2</th>
   </tr>
   <tr>
    <td class=left>argle</td>
    <td class=left>bargle</td>
    <td class=middle>w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;w&#x200b;</td>
    <td class=right>glyp</td>
    <td class=right>glof</td>
   </tr>
  </table>
 </body>
</html>

上面的技巧是不时地插入一个不可见的空格 ( &#x200b;)。

我讨厌回答我自己的问题，所以我会等待有人提出更漂亮的东西，然后再结束这个。

于 2011-01-10T19:07:15.623 回答
0

相关变化：

  • 添加table { table-layout:fixed }到您的 CSS 中。
  • 添加width="100%"到您的table.
  • 删除了无关的div，并将.wrap该类添加到您的tdwith 类.middle中。
  • 将该width=100属性添加到您的其他列。

完整的 HTML：

<html>
 <head>
  <style type='text/css'>
   table { table-layout:fixed; /* nothing here - table is block, so should auto expand to as large as it can get without causing scrollbars? */ }
   .left { text-align:center; }
   .right { text-align:right; }
   .middle { text-align:left; /* expand this column to as large as it can get within table? */}
   .wrap { word-wrap:break-word; /* use up entire cell this div is contained in? */ }
  </style>
 </head>
 <body>
  <table width="100%">
   <tr>
    <th class=left width=100>L-1</th>
    <th class=left width=100>L-2</th>
    <th class=middle>M</th>
    <th class=right width=100>R-1</th>
    <th class=right width=100>R-2</th>
   </tr>
   <tr>
    <td class=left>argle</td>
    <td class=left>bargle</td>
    <td class="middle wrap">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</td>
    <td class=right>glyp</td>
    <td class=right>glof</td>
   </tr>
  </table>
 </body>
</html>
于 2011-01-09T11:54:36.617 回答
0

乍一看，这很有效：

<!DOCTYPE html>
<html>
 <head>
  <style type='text/css'>
   td { vertical-align:top; }
   .left { text-align:center; }
   .right { text-align:right; }
   .middle,
   .middle iframe { width:100%; }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th class=left>L-1</th>
    <th class=left>L-2</th>
    <th class=middle>M</th>
    <th class=right>R-1</th>
    <th class=right>R-2</th>
   </tr>
   <tr>
    <td class=left>argle</td>
    <td class=left>bargle</td>
    <td class=middle><iframe style='border:0' src='data:text/html,%3Cbody style=%22margin:0;word-wrap:break-word%22%3Ewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww%3C/body%3E'></iframe></td>
    <td class=right>glyp</td>
    <td class=right>glof</td>
   </tr>
  </table>
 </body>
</html>

但是当您添加另一行时会中断，因为嵌入的 iframe 具有静态高度。

于 2011-01-10T18:47:22.773 回答