css中怎么设置表中的一个TD的宽度自动适应内容的宽度?

Question

下面是HTML代码. 我设置了,好像没有作用:
<TABLE style=" visibility: visible;" class="bar_layout" width="100%">
  <TR>
    <TD class=bar_left>
&nbsp;<A STYLE="text-decoration:none;">
<img  border=0 align="absmiddle" src="image/action_button.gif">
</A>
&nbsp;Confirm&nbsp;&nbsp;
<A STYLE="text-decoration:none;" >
<img border=0 align="absmiddle" src="image/delete_button.gif">
</A>&nbsp;Clear&nbsp;&nbsp;
<A STYLE="text-decoration:none;" >
<img  border=0 align="absmiddle" src="image/search_button.gif"></A>&nbsp;Select&nbsp;Vessel...&nbsp;</TD>
    <TD></TD>
    <TD class=bar_right></TD>
  </TR>
</TABLE>css:
.bar_layout
{
    BORDER-TOP: #ffffff 1px solid;
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    WIDTH: 100%;
    COLOR: #666666;
    FONT-FAMILY: Verdana;
}
.bar_left
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    PADDING-BOTTOM: 0px;
    COLOR: #666666;
    PADDING-TOP: 0px;
    FONT-FAMILY: Verdana;
    TEXT-ALIGN: left;
    BACKGROUND-COLOR: #eff39a;
}
.bar_right
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    PADDING-BOTTOM: 0px;
    COLOR: #666666;
    PADDING-TOP: 0px;
    FONT-FAMILY: Verdana;
    TEXT-ALIGN: right;
    BACKGROUND-COLOR:BLUE;
}

Answer 1

你说的：第一个TD 的宽度要适应它里面图片和文字的大小.而第二个TD就占剩下的所有宽度.
后面两个td被挤掉正好就是你说的这种效果。先说这样代码产生了什么问题吧~？

Answer 2

上面有三列(三个TD). 
其实我不管后面的要怎么样.我只要第一个TD适应内容宽度.主要是要背景颜色.

Answer 3

那你在
.bar_layout
{
    BORDER-TOP: #ffffff 1px solid;
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    WIDTH: 100%;
    COLOR: #666666;
    FONT-FAMILY: Verdana;
}
这个样式里加上一个width:10px;
因为后面的td没有设置宽度，所以他自己会撑大，文本多长，td就多大
不知道是否符合你的要求~``````

Answer 4

.bar_right
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    PADDING-BOTTOM: 0px;
    COLOR: #666666;
    PADDING-TOP: 0px;
    FONT-FAMILY: Verdana;
    TEXT-ALIGN: right;
    BACKGROUND-COLOR:BLUE;
}在这个样式的最后加上
width:100%
试试
这样，你先得给table设置个宽度，不然，会撑满整个页面的
中间的td会被挤得只剩一个像素

Answer 5

谢谢yiyioo的帮助.我加了width:100%
可是左边的图片和文字就换行了