table 这个妖孽 -> tr、tr高度不支持小数

谷歌、火狐tr、tr高度不支持小数，IE支持

若tr设置的高度小于它自己填充的高度，则设置的高度不起作用；
若tr设置的高度（小数）大于它自己填充的高度，最后应用的高度会四舍五入

示例

代码如下：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      div#table {
        height: 243px;
        width: 500px;
        background: red;
      }

      table {
        height: 100%;
        width: 100%;
        background: #AFEEEE;
        border-collapse: collapse;
        border-spacing: 0;
        text-align: center;
      }

      tbody tr {
        height: calc(100% / 3);
      }

      thead tr {
        height: 40px;
      }

      tbody tr:nth-child(2n) {
        background: #e4dc90;
      }

      tbody tr:nth-child(2n+1) {
        background: #D4ECA2;
      }
    </style>
  </head>

  <body>
    <div id="table">
      <table>
        <thead>
          <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
          </tr>
          <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
          </tr>
          <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
          </tr>
        </tbody>
      </table>
    </div>

  </body>

</html>
posted @ 2017-05-25 11:33  ning0_o  阅读(356)  评论(0)  编辑  收藏  举报