表列调整大小

Question

我有这样的表格结构（如果可以解决引起它们的问题我可以用Div替换）并且想要将左列的宽度设置为固定大小（以像素为单位），例如300px并使右列自动宽度保持它从左列调整到浏览器的边框。我的解决方案在这种情况下不起作用。

 <table>
   <tr>
        <td width="300"> 
            fixed size
        </td>
   </tr>
   <tr>
        <td width="100%"> 
             take free space
        </td>
   </tr>
 </table>

Answer 1

使用/起诉DIV：

<div style="background-color: lime; float: left; width: 300px;">fixed size</div>
<div style="background-color: cyan; margin-left: 300px;">take free space</div>

Demo here

Answer 2

使用table：http://jsfiddle.net/rtVzf/

<table width="100%">
   <tr>
        <td width="300"> 
            fixed size
        </td>
        <td> 
            take free space
        </td>
    </tr>
</table>

Answer 3

尝试将表格固定在左侧并指定100％，然后将左栏固定为固定宽度，然后将右栏固定在右侧。

 <TABLE width="100%" height="100%" align="left" border="1">
       <TR>
         <TD width="300px" height="100% align="left" valign="top">
        <p align="left">Get rid of the border by changing it to 0 after you get all of your placement down.</p>
         </TD>
         <!--other TDs if desired-->
         <TD height="100%" align="right" valign="top">
           <p align="left">written stuff or images, etc.</p>
         </TD>
       </TR>
    </TABLE>

Answer 4

您的表格也应该通过属性或CSS来获得宽度=“100％”。