table标签宽度

在给table标签设置了一定的宽度后，如果设置的一行td的宽度总宽度大于设置的table的宽度，浏览器会自动将td的宽度进行等比例缩放去适应应table的宽度

table-layout 属性用来显示表格单元格、行、列的算法规则。

• Table只有Table的宽度是可以设置的，并且各个浏览器理解一致

• 1.原则上应该讲table的宽度设置成一个固定的值，而不应该设置成一个根据屏幕变化的值
  Table的宽度为600px,Table的td所有宽度总和不到600px,浏览器会自动按照td的宽度的比例算出宽度

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

  运行结果：两个td都是300px;

• 2.Table的宽度为600px,前两个td的宽度已经为600px,那么第三个td的宽度没有指定，这样的话第三个td的宽度是根据内容出现宽度的，然后前两个再按照比列计算、
  前两个td小于table宽度，那么最后一个td就起到补全的作用

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

  3.Table中的td内，如果放置块状元素超过td的宽度，并且table的table-layout: fixed;(fixed表示td的宽度是定长的，不随td内容变化而变化)。
  这样尽量不要再td里写overflow: auto; 因为这样在IE6,7不会出现滚动条的，最好的办法是套一个div，宽度设置成100%

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

  <col>标签是给表格中一个或多个列定义属性值，而<colgroup>标签是对表格中的列进行组合，从而实现对表格的格式化。<col>标签一般会放在<colgroup>标签中使用，对<colgroup>标签组合的列分别设置样式。<colgroup>标签也可以有样式属性，是对组合的列设置相同的样式，<colgroup>标签设置的样式会被<col>标签设置的样式覆盖。

  格式:
  <colgroup span=“跨几列”>
  <col 属性1=“属性值1” 属性2=“属性值2”…/>
  <col 属性1=“属性值1” 属性2=“属性值2”…/>
  </colgroup>

  <table class="lytable-table">
     <colgroup>
          <col width="110">
          <col width="110">
          <col width="40">
          <col width="80">
          <col width="40">
      </colgroup>
      <thead>
          <tr>
              <th>维护项目</th>
              <th>维护分项</th>
              <th>次数</th>
              <th>周期</th>
              <th>月份</th>
          </tr>
      </thead>
      <tbody class="lytable-table__body">
          <tr>
              <td>维护项目</td>
              <t>维护分项</td>
              <td>次数</td>
              <td>周期</td>
              <td>月份</td>
          </tr>
      </tbody>
  </table>

   代码中给table元素添加 table-layout: fixed; 或者给td添加 word-break: break-all ，都可以达到表格安装我们设置的宽度显示：table-layout: fixed;（固定位设置的宽度）