コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS を使用して表のセルの幅を同じに設定するコード例を共有します。

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

零下一度
リリース： 2017-05-08 13:55:06
オリジナル
3921 人が閲覧しました

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

2.

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

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

関連ラベル：
css，表格，单元格，实例
ソース：php.cn
前の記事：CSS フロートについて知らないこと 次の記事：css3の新ユニット(vw)の詳細説明
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
テーブルではなく DOM を通じてデータをレンダリングする方法 作成中のアプリケーションについて質問があります。Oracle データベースを使用しており、データベースから情報を取得し、テーブルを介して画面に表示していますが、データを個別に処理し...
から 2024-04-04 18:17:27
0
1
3567
表のタイトルを垂直方向に回転、中央 + 下揃え、クロスブラウザー ヘッダーが回転されたテーブルがありますが、これは Chrome では期待どおりに表示されますが、Firefox では期待どおりに表示されません。 Chromev108 (垂直下、水...
から 2024-04-04 16:45:25
0
1
330
表セルのコンテナが親セルの高さ全体を占めるようにしてください。 Flexboxを使用せずにコンテンツを垂直方向に整列させようとしています。このユースケースにはいくつかの問題があるため、垂直方向に整列されたテーブルでそれを行おうとしていますが、問...
から 2024-04-04 16:03:18
0
1
404
2 つの別々のテーブルから売上データを集計する際の MySQL の問題 どうぞよろしくお願いいたします。 SQL を学習し、使用するデータを生成していますが、1 つの単純なことで行き詰まっています。以下のスクリーンショットの表は、sales20 表の一...
から 2024-04-04 14:22:13
0
2
343
JQuery - 動的テーブルでのオンザフライ計算/変換 動的なHTMLテーブル（行を追加できます）があり、ユーザーが値を入力したときに値をリットル単位で読み取り、それをUSGに変換したい（値をリットル単位で取得し、それを変換して変換して...
から 2024-04-03 12:38:26
0
1
393
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート