HTML资料之表格td的宽度控制

◆ 固定td标签宽度：

我们可以设置table的宽度，具体的px或者百分比，浏览器会自动按比例给td分配宽度。给table上加上table-layout: fixed;属性，代表td的宽度固定，不随内容变化。

◆ 给所有td分配宽度：

td标签分配的宽度是按照我们所设宽度的比例进行均分。例如直接给td赋值200px，实际的效果是两个都是300px。

<table style="width: 600px;border-collapse: collapse;" >
   <tr>
        <td style="width: 200px;">我是200px</td>
       <td style="width: 200px;">我也是200px</td>
    </tr>
</table>

◆ 给部分td分配宽度：

这种情况下浏览器会先给第三个td根据内容分配宽度，再根据比例给前两个td分配宽度。
如果前两个宽度加起来不足600px，那么第三个则是起到补齐600px的作用。

  <table style="width: 600px;border-collapse: collapse;" >
     <tr>
         <td style="width: 300px;">我是200px</td>
         <td style="width: 300px;">我也是200px</td>
         <td >我是根据内容的</td>
     </tr>
 </table>

◆ 一个td分配宽度，另一个td没有分配：

当我们的内容，超过了我们设置的宽度时，我们会发现自己设置的宽度又再次失效了。

<table style="width: 600px;border-collapse: collapse;table-layout: fixed;" >
    <tr>
        <td style="width: 200px;"><div style="width: 100%;overflow: auto;"><div style="width: 300px;height: 100px;background-color: red;"></div></div></td>
       <td >我是自由宽度</td>
    </tr>
</table>