CSS を使用して表のセルの幅を同じに設定するコード例を共有します。-CSSチュートリアル-php.cn

CSS を使用して表のセルの幅を同じに設定するコード例を共有します。

零下一度

リリース： 2017-05-08 13:55:06

オリジナル

3840 人が閲覧しました

htmlcss tablelayout: tableセルを同じ幅に設定する修正を以下に共有します。

<!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 オンラインビデオチュートリアル

php.cn Dugu Jiijian (2) - CSS ビデオチュートリアル

以上がCSS を使用して表のセルの幅を同じに設定するコード例を共有します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。