表格Table宽度设置无效

链接: 菜鸟在线HTML/CSS/JS在线工具.可以用这个工具在线做一下试验，下面的代码都是在这页面实现的

---

第1回合

<table>标签中没有加style="table-layout:fixed;"列的宽度根据每行中最宽的决定

  <table border="1px"  cellspacing="0" width="300px">
    <tr>
      <td width="10%">1</td>
      <td width="30%">1</td>
      <td width="60%">1</td>
    </tr>
    <tr>
      <td width="25%">2</td>
      <td width="25%">2</td>
      <td width="50%">2</td>
    </tr>
  </table>

---

第2回合

加了style="table-layout:fixed;"列宽根据第一行的列宽决定

但是第二行的宽就没办法定义了

  <table border="1px"  cellspacing="0" width="300px" style="table-layout:fixed;">
    <tr>
      <td width="10%">1</td>
      <td width="30%">1</td>
      <td width="60%">1</td>
    </tr>
    <tr>
      <td width="25%">2</td>
      <td width="25%">2</td>
      <td width="50%">2</td>
    </tr>
  </table>

---

第3回合 (关键回合)

通过合并单元格的形式来获得自己想要的布局

切记：第一行的合并单元格总数一定要等于下面每行的单元单元格总数，做到每一行的单元格总数都是一样的，多少无所谓一样就行，但是，合并单元格太少做不出这种相互错位的效果

  <table border="1px"  cellspacing="0" width="300px" style="table-layout:fixed;">
    <tr>
      <td width="10%" colspan = "2">1</td>
      <td width="30%" colspan = "6">1</td>
      <td width="60%" colspan = "12">1</td>
    </tr>
    <tr>
      <td width="25%" colspan = "5">2</td>
      <td width="25%" colspan = "5">2</td>
      <td width="50%" colspan = "10">2</td>
    </tr>
  </table>

---

第4回合

去掉style="table-layout:fixed;"第一行第二列比上图要窄一点,可能是因为用了百分比的原因

  <table border="1px"  cellspacing="0" width="300px">
    <tr>
      <td width="10%" colspan = "2">1</td>
      <td width="30%" colspan = "6">1</td>
      <td width="60%" colspan = "12">1</td>
    </tr>
    <tr>
      <td width="25%" colspan = "5">2</td>
      <td width="25%" colspan = "5">2</td>
      <td width="50%" colspan = "10">2</td>
    </tr>
  </table>

---

第5回合

第一行的宽换成固定值，第二行不变，表格发生了变化

  <table border="1px"  cellspacing="0" width="300px" >
    <tr>
      <td width="30px" colspan = "2">1</td>
      <td width="90px" colspan = "6">1</td>
      <td width="180px" colspan = "12">1</td>
    </tr>
    <tr>
      <td width="25%" colspan = "5">2</td>
      <td width="25%" colspan = "5">2</td>
      <td width="50%" colspan = "10">2</td>
    </tr>
  </table>

---

第6回合

加上style="table-layout:fixed;"变回原来的期望布局

  <table border="1px"  cellspacing="0" width="300px" style="table-layout:fixed;">
    <tr>
      <td width="30px" colspan = "2">1</td>
      <td width="90px" colspan = "6">1</td>
      <td width="180px" colspan = "12">1</td>
    </tr>
    <tr>
      <td width="25%" colspan = "5">2</td>
      <td width="25%" colspan = "5">2</td>
      <td width="50%" colspan = "10">2</td>
    </tr>
  </table>

---

第7回合

全部换成固定值，去掉style="table-layout:fixed;"布局又变回讨厌的样子

  <table border="1px"  cellspacing="0" width="300px">
    <tr>
      <td width="30px" colspan = "2">1</td>
      <td width="90px" colspan = "6">1</td>
      <td width="180px" colspan = "12">1</td>
    </tr>
    <tr>
      <td width="75px" colspan = "5">2</td>
      <td width="75px" colspan = "5">2</td>
      <td width="150px" colspan = "10">2</td>
    </tr>
  </table>

---

第8回合

加上style="table-layout:fixed;"，又变成我们喜欢的样子了

  <table border="1px"  cellspacing="0" width="300px" style="table-layout:fixed;">
    <tr>
      <td width="30px" colspan = "2">1</td>
      <td width="90px" colspan = "6">1</td>
      <td width="180px" colspan = "12">1</td>
    </tr>
    <tr>
      <td width="75px" colspan = "5">2</td>
      <td width="75px" colspan = "5">2</td>
      <td width="150px" colspan = "10">2</td>
    </tr>
  </table>

---

HTML不太会，碰巧遇到了宽度的问题，八个回合下来，宽度的问题至少有点思路了，有其他的思路，欢迎留言分享