6

在一个项目中，我需要渲染具有特定宽度列的表格，每个表格行只有一个 HTML 行（不换行）。我需要每个表格单元在顶部和底部有 1 个像素的填充，在左右有 2 个像素的填充。我能想出的跨浏览器的最佳方法是以这种方式将 div 放在表格内的 td 中：

<style>
  table.grid { border: none; border-collapse: collapse; }
  table.grid tbody tr td { padding: 1px 2px; }
  table.grid tbody tr td div { overflow: hidden; white-space: nowrap; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><div>One</div></td>
      <td class="two"><div>Two</div></td>
    </tr>
    <tr>
      <td class="one"><div>Another One</div></td>
      <td class="two"><div>Another Two</div></td>
    </tr>
  </tbody>
</table>

我希望能够消除添加额外 div 的需要。我花了很多时间在谷歌上搜索这个问题，但找不到替代方案。

有没有办法在不需要添加额外的 div 的情况下做我需要的事情？如果是，那是什么？

有没有办法在不使用表格的情况下获得所需的结果？

4

4 回答 4

4

不幸的是，表格元素不尊重溢出，因此您需要将其应用于子元素。

编辑：我可能说得太早了，因为我可以使用 FF 在 FF 中创建这种效果，max-width而且我发现了这个可能适用于 IE 的东西。你每天都会学到一些东西。

edit2：是的，它至少适用于 IE7，但有一个严重的警告，文本中不能有空格，它们必须转换为&nbsp;. <div>为了清洁和兼容性，我认为您可能应该坚持使用该解决方案。

于 2009-01-06T13:11:39.623 回答
0

其实，你可以。

通常，表会占用它需要的空间。如果您给出table100% 的宽度，它将占用 100% 的 with 并在单元格之间共享其内容。

表格中没有可用空间：在某些时候，一旦设置了其他单元格的大小，就必须有一个单元格占用剩余空间。

要设置单元格的宽度，您需要将awidth和 amax-width赋予相同的 size。对于具有 N 列的表，您可以对 N-1 列执行此操作，最后一列将占用剩余空间。

如果对 N-2 列执行此操作，则没有固定的两列将共享剩余空间。

有了这一切，您可以添加white-space:no-wrap和/或text-overflow:ellipsis如果您愿意。

这是一个图像示例（我的 RSS 阅读器）： https ://i.stack.imgur.com/bPpKP.png

还有一个活生生的例子：https ://codepen.io/lehollandaisvolant/pen/REVNLy?editors=1100

你可以看到它实际上是非常强大的。在codepen中，您可以看到：

  • 一些单元格是固定宽度
  • 一些单元格适合它包含的文本
  • 一些单元格适合容器

您可以决定每个单元格的行为（只要有一个单元格适合容器）

于 2018-12-22T20:08:10.247 回答
-1

您不需要在每个表格单元格中嵌套一个 div。以下应该达到相同的效果。

<style>
  table.grid { border-collapse: collapse; }
  table.grid tbody tr td { overflow: hidden; white-space: nowrap; padding: 1px 2px; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><span>One</span></td>
      <td class="two"><span>Two</span></td>
    </tr>
    <tr>
      <td class="one"><span>Another One</span></td>
      <td class="two"><span>Another Two</span></td>
    </tr>
  </tbody>
</table>
于 2009-01-06T13:08:28.117 回答
-3

您也可以简单地用 div 替换 table。

然后你必须在 CSS 中定义列宽（这可能很难在所有浏览器上工作）。

示例：您的代码将如下所示：

<div class="mainBoxOfTable">
    <div class="Line">
      <div class="ColumnOne">One</div>
      <div class="ColumnTwo">Two</div>
    </div>
    <div class="Line">
      <div class="ColumnOne">another One</div>
      <div class="ColumnTwo">another Two</div>
    </div>
 </div>
于 2009-01-29T15:31:47.363 回答