table的td宽度控制

能旭
2023-12-01

进入个人博客 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的宽度固定,不随内容变化。
 类似资料: