如何使用CSS调整表格的第一个单元格的宽度

我有如下所示的html结构。如何使用CSS调整表格的第一个单元格的宽度

<style> 
.divcontainer 
{ 
    width:100% 

} 
.left_menu { 
    background: none repeat scroll 0 0 #333333; 
    border-radius: 5px 5px 5px 5px; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    padding: 5px; 
    width: 200px; 
} 

</style> 
<div class="divcontainer"> 
    <table width="100%"> 
     <tr> 
      <td valign="top"> 
       <div class="left_menu"> 
        1 
       </div> 
      </td> 
      <td> 
       <div> 
        2</div> 
      </td> 

     </tr> 
    </table> 
</div>

我需要建立一个结构如下 sample

的图片，但我不希望样式应用于TD。 td的宽度应通过应用于子div的类进行调整。总之，我的第一个td应该占用tr的25％，第二个占用剩下的75％。有谁可以告诉我如何做到这一点？

来源

2014-06-22 Tom Cruise

您可以设置第二个td hudge width。然后它将采用最大宽度，首先td将收缩到其内容。 http://jsfiddle.net/f5q3E/

basicly在这里你需要设置：

td { 
    background:red; 
} 
td+td { 
    width:100%; 
    background:blue; 
}

首个TD将调整其内容和大小的DIV如果有第二个TD将利用剩余的空间。

来源

2014-06-22 14:11:33

很大。正是我在找什么。多一个查询。我如何可以提到这个特定的div？即我需要将以上样式应用于div divcontainer。 –

你是什么意思，给容器？ –

我明白了。 .divcontainer td { background：red; } .divcontainer td + td { width：100％; 背景：蓝色; }做了伎俩。谢谢。 –

有很多方法可以解决这个问题 - 这里有一个 - FIDDLE - 它并没有比任何其他方法更好。

我对你的tds的着色以及进入它们的div的着色有点困惑。

如果你能告诉我们你想要做什么的目标，也许我们可以提出一些其他建议，比如不使用table来布局divs？浮动divs？

CSS

table tr td:nth-child(1) { 
    width: 25%; 
    background-color: red; 
} 
table tr td:nth-child(2) { 
    width: 75%; 
    background-color: blue; 
    color: white; 
}

来源

2014-06-22 14:21:57 TimSPQR

如何使用CSS调整表格的第一个单元格的宽度

回答

相关问题