使用CSS创建具有特定宽度且无换行的表格单元格。

12 浏览
0 Comments

使用CSS创建具有特定宽度且无换行的表格单元格。

在我参与的一个项目中，我需要以每行只有一行HTML代码的方式渲染具有特定宽度的表格列（不换行）。我需要每个表格单元格的上下边距为1像素，左右边距为2像素。我能想到的在跨浏览器中最好的解决方案是以以下方式在表格中的td内放置一个div：\n




  
    

      One
      Two
    

    

      Another One
      Another Two

\n我希望能够消除添加额外div的需要。我花了很多时间搜索这个问题，但找不到其他的解决方案。\n是否有一种方法可以在不添加额外div的情况下实现我所需的功能？如果有，它是什么？\n是否有一种方法可以完全不使用表格来实现所需的结果？

0

3 答案

0 Comments

使用CSS创建特定宽度的表格单元格，并且不换行的问题出现的原因是，使用overflow:hidden; white-space:nowrap;在

中设置不起作用，不同浏览器之间存在兼容性问题。

为了解决这个问题，可以使用以下代码来实现相同的效果：




  
    

      One
      Two
    

    

      Another One
      Another Two

感谢快速的回复。我尝试在

中使用overflow: hidden; white-space: nowrap;，但似乎在跨浏览器上不起作用。

为什么添加裸露的会有任何作用呢？更何况优于添加

？

0
0 Comments

使用CSS创建具有特定宽度且不换行的表格单元格的原因是，通常表格会占用它所需的空间。如果给表格设置了100%的宽度，它将根据内容在单元格之间均分这个宽度。然而，在表格中是没有空闲空间的，一旦其他单元格的大小设置好了，必然会有一个单元格占据剩余的空间。

要设置单元格的宽度，需要给它同时设置width和max-width为相同的大小。对于具有N列的表格，可以对N-1列进行设置，最后一列将占据剩余的空间。如果对N-2列进行设置，两列没有固定宽度的单元格将共享剩余的空间。如果需要的话，还可以添加white-space:no-wrap和/或text-overflow:ellipsis。

在提供的图片和代码示例中，可以看到这种方法的强大之处。在代码示例中，可以看到：

- 一些单元格具有固定宽度

- 一些单元格根据其内容自适应宽度

- 一些单元格适应容器的宽度

只要有一个单元格适应容器的宽度，就可以决定每个单元格的行为。由于规范没有为表格单元格定义这一点，不建议使用max-width。

参考链接：[how can i set the max width of a table cell using percentages](https://stackoverflow.com/questions/8465385)

0
0 Comments

问题的原因是表格元素不支持overflow属性，所以需要将overflow应用到子元素上。然而，使用max-width属性可以在Firefox中实现这种效果，并且可以使用一个称为"this thing"的解决方案在IE中实现。但是，在IE7中使用这种解决方案时，有一个严重的限制，即文本中不能有空格，必须将其转换为 。因此，为了保持代码的干净和兼容性，最好使用

解决方案。感谢提供链接和评论，尽管我将继续使用现有的解决方案，但由于你的回答，我变得更有学识了。由于链接已经失效，所以习惯上应该在此处发布相关内容。

0