使用CSS创建特定宽度的表格单元格，没有自动换行

In a project have been involved in I needed to render tables with columns of a specific width with only one HTML line per table row (no wrapping). I need each table cell to have a padding of 1 pixel at the top and bottom and 2 pixels at the left and right. The best way I can come up with that works cross browser is to put a div inside a td inside the table in this way:

在涉及的项目中,我需要使用特定宽度的列来呈现表,每个表行只有一行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>

I would love to be able to eliminate the need to add the extra div. I've spend many hours googling this issue but can't find an alternative.

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

Is there a way to do what I need without the need to add the extra div? If So, what is it?

有没有办法做我需要的东西而不需要添加额外的div?如果那么,它是什么?

Is there a way of getting the desired result without using tables at all?

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

3 个解决方案

#1

Unfortunately table elements do not respect overflow, so you will need to apply that to a child element.

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

edit: I may have spoken too soon, as I can create this effect in FF using max-width and I've discovered this thing which might work for IE. You learn something every day.

编辑:我可能已经说得太快了,因为我可以使用max-width在FF中创建这个效果,我发现了这个可能适用于IE的东西。你每天都学到一些东西。

edit2: yeah it does work for IE7 at least but there's a serious caveat that you can't have whitespace in the text, they have to be converted to  . I think you should probably stick with the <div> solution for sake of cleanliness and compatability.

edit2:是的,它至少适用于IE7,但有一个严重的警告,你不能在文本中有空格,它们必须转换为。我认为你应该坚持使用

解决方案,以保持清洁和兼容性。

#2

You should not need to nest a div within each table cell. The following should achieve the same affect.

您不需要在每个表格单元格中嵌套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>

#3

You can also simply replace table by div.

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

Then you have to define the column width in CSS (which may be tricky to get to work across all browsers).

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

Example: Your code would then look like this:

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

<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>

#1