table的td宽度控制

进入个人博客 Eighteen Blog

前言：td在我们有具体宽度控制的时候显的格外难以驯服，但是知道了它的原理，解决起来就不会再怕了。。

首先table的宽度我们可以设置，具体的px或者百分比，浏览器会自动按比例给td分配宽度。

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

1. 例如我们这样直接给td赋值实际的效果是两个都是300px，均分。
2. 它也并不是跟我们所设置的宽度没有任何的关系，而是按照我们所设宽度的比例进行均分。
3. 例如我们定义的table有600px的宽度，td1赋值200px，td2赋值400px，那么实际宽度就是我们所赋值的宽度。
4. 如果两者加起来不到600px，那么浏览器会自动按比例进行分配宽度。（经测试，这个比例是固定的）
5. 但是当两者宽度设置相同的情况下，一直都是均分table的宽度

第二种情况：

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

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

第三种情况：

<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>

1. 当我们的内容，超过了我们设置的宽度时，我们会发现自己设置的宽度又再次失效了，这时侯我们可以再table上加上table-layout: fixed;属性，代表td的宽度固定，不随内容变化。