zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    C# Ini配置文件
    C#日志写入
    GZFramework.DB.Core初始化
    httpHelper
    GZFramework代码生成器插件使用教程
    MVC部署IIS设置
    SignalR记录
    洛谷 P2360 地下城主
    洛谷 P1379 八数码难题(map && 双向bfs)
    洛谷 P1155 双栈排序
  • 原文地址:https://www.cnblogs.com/Zting00/p/7497625.html
Copyright © 2011-2022 走看看