Maison > interface Web > tutoriel CSS > Partagez un exemple de code qui utilise CSS pour définir la même largeur de cellules de tableau

Partagez un exemple de code qui utilise CSS pour définir la même largeur de cellules de tableau

零下一度
Libérer: 2017-05-08 13:55:06
original
3921 Les gens l'ont consulté

htmlcss tablelayout : fixe définit les cellules du table pour qu'elles aient la même largeur. Je le partagerai avec vous ci-dessous.

<!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>
Copier après la connexion

【Recommandations associées】

1 Tutoriel vidéo en ligne CSS gratuit

2. Manuel CSS en ligne

3. php.cn Dugu Jiujian (2)-tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal