根据内容如何使表单元格缩小？ [英] How to make table cell shrink according to the content?

问题描述

我怎样才能让表格有两列（单元格）：

• 第一个单元格根据内容


• 另一个单元格适合表格的其余部分（宽于两个内容）
  

示例：

 < table style =width：500px;> 
< tr> 
< td> foo< / td> 
< td>栏< / td> 
< / tr> 
< / table> 
  

我需要这样的表格：

  .___________________________________________________________________________。 
 | foo |酒吧<这里有很多空间> | 
 | _____ | _____________________________________________________________________ | 
 500 px总宽度
  

注意：我不知道foo所以我不能设置50px，10％或类似的东西。

解决方案

第二个单元格的宽度为 100％

HTML：

 < table> 
< tr> 
< td> foo< / td> 
< td class =grow> bar< / td> 
< / tr> 
< / table> 
  

CSS：

  table {width：500px; } 
 .grow {width：100％; } 
  

检查这个小提琴 out。

How can I make the table with 2 columns (cells) look like this:

• First cell is shrink according to the content
• The other cell fits the rest of the table (wider than both contents together)

Example:

<table style="width: 500px;">
   <tr>
      <td>foo</td>
      <td>bar</td>
   </tr>
</table>

I need the table to look like this:

.___________________________________________________________________________.
| foo | bar            <a lot of space here>                                |
|_____|_____________________________________________________________________|
                           500 px total width

Notice: I don't know the width of "foo" so I cannot set "50px", "10%" or something like that.

解决方案

You can set the width of the second cell to 100%

HTML:

<table>
   <tr>
      <td>foo</td>
      <td class="grow">bar</td>
   </tr>
</table>​

CSS:

table { width: 500px; }
.grow { width: 100%; }​

Check this fiddle out.

这篇关于根据内容如何使表单元格缩小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！