欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

分享一个利用css来设置表格单元格等宽的实例代码

程序员文章站 2022-04-01 20:33:34
...
htmlcss tablelayout: fixed 设置表格单元格等宽,下面小编就来和大家分享一下。
<!DOCTYPE>
  <html>
  <head>
  <meta charset="utf-8" />
  <title>设置表格单元格等宽</title>
  <style type="text/css">
   /*
      使字体在所有设备上都达到最佳的显示
    */
  html { 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
  }

  /*
    给body添加阴影
  */
  body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    z-index: 100;
  }

   /*
    表格单元格等宽
   */
    .calendar { table-layout: fixed; }
  </style>
</head>

<body>

<table width="100%" border="1" class="calendar">
    <tr>
        <td>我在测试我在测试我在测试我在测试我在测试我在测试我在测试我在测试我在测试</td>
        <td>122222222222222</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
  </table>
</body>
</html>

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱(2)-css视频教程

以上就是分享一个利用css来设置表格单元格等宽的实例代码的详细内容,更多请关注其它相关文章!