停止td使其他tds在相同宽度之上和之下

Question

如何停止使用大量文本的td使td高于它？

在此示例中，包含“1”的单元格的轮廓显示与包含“此处为长文本”的单元格一样宽。我想要的是包含'1'的单元格只需要适合它所包含的文本所需的宽度。

可以用CSS完成吗？

http://jsfiddle.net/r7yXD/1/

<table>
 <tr> 
  <td>1</tRund>
  <td>2</td>
 </tr>
 <tr> 
  <td>long text here</td>
  <td>.</td>
 </tr>
</table>


td {
border: 1px solid red;
}​

所以看下面的图片，第一个例子是发生了什么，我明白了为什么，但是我可以用CSS做第二个选项吗？

Answer 1

你做不到。它的性质使得td的宽度相同。

但是你可以添加额外的td并使用colspan="2"，但说实话，如果你需要做这样的事情，特别是对于文本，你可能不会使用表格。

Answer 2

你有没有试过这样的东西

<style type="text/css">
td {
border: 1px solid red;
}​
</style>

<table>
 <tr> 
  <td>1</td>
  <td colspan="2">2</td>
 </tr>
 <tr> 
  <td colspan="2">long text here</td>
  <td>.</td>
 </tr>
</table>

Answer 3

正如评论中所述，使用<table> - 元素是不可能的。您可以在w3.org上阅读更多相关信息：“17.5 Visual layout of table contents”。

它说：

  

这些方框的视觉布局由行和列的矩形不规则网格控制。每个盒子占据整数个网格单元，根据以下规则确定。

有趣的是你的案例来自第5号规则：

  

[...]每个单元格因此是一个矩形框，一个或多个网格单元宽和高。 [...]