HTMLのテーブルの内容は中央に水平と垂直に表示されます

HTMLのテーブルの内容は中央に水平と垂直に表示されます

CSSスタイルファイルで指定

#class td /*表のテキストを左右上下に揃えるように設定する*/ 
{  
    垂直位置合わせ: 中央;
    テキスト配置: 中央;  
}
/*class はそれが属するクラスです*/
<div id="class" align="center" style="margin: 0cm 0cm 0pt; text-align: left">                                                                      
<table class="table table-bordered" border="1" width="100%" style="font-size: 14pt; color: #000000; font-family: 楷体;mso-ascii-font-family: 'times new roman'; mso-hansi-font-family: 'times new roman'">                                                             
<caption><h2 style="text-align: left;font-size: 16pt;font-family: 宋体;color: red;">タイトル</h2><
/キャプション>                                                              
<t本文>                                                                 
<tr style="font-weight: bold;mso-bidi-font-size: 12.0pt;font-family: 宋体;" >                                                                      
<td>シリアル番号</td>                                                                      
<td>適用可能な状況</td>                                                                      
 <td>詳細</​​td>                                                                       
<td>備考</td>                                                                   
 </tr>                                                                                                                                       
<tr>                                                                    
<td>1</td>                                                                     
<td>xxxxx</td>                                                                      
<td style="text-align: left;"> <!--左揃えを指定します-->                                                                     
 <span>                                                                             
xxxxxx<br>                                                                                                                                                        
</span>                                                                      
</td>                                                                       
<td><a href="#">詳細を表示</a>
</td>                                                              
</tr>                                                
</tbody>                                                          
</テーブル> 
</div>

上記ではdivのクラスとしてidを指定し、図に示すように、tableの属性tdはcssで指定されたスタイルを使用します。

這里寫圖片描述

以上が、HTML でのテーブル コンテンツの水平および垂直中央揃えについてご紹介した内容です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  Vueでaxiosをカプセル化する方法

>>:  MySQLの連結関数CONCATの使い方の詳しい説明

推薦する

DockerでMySQLコンテナを作成する簡単な手順

序文すでに Docker をインストールしており、Docker について簡単に理解しています。ここで...

MySql でデータの重複挿入を回避する 3 つの方法

序文MySql で主キーの競合または一意キーの競合が発生した場合、挿入方法に応じてエラーを回避するた...

TypeScript での関数オーバーロード

目次1. 関数シグネチャ2. 関数のオーバーロード2.1 オーバーロードされたシグネチャは呼び出し可...

アーティストの自己啓発におけるいくつかの経験

会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...

vue3 コンポーネント通信方法の概要と例

vue3コンポーネントの通信モードは次のとおりです。小道具$放出$expose / 参照$属性vモデ...

JavaScript を使用して二分探索木を実装する方法

コンピュータ サイエンスで最も一般的に使用され、議論されているデータ構造の 1 つは、二分探索木です...

CSSラベル表示モードについて1つの記事で学ぶ

タグの種類(表示モード) HTML タグは、一般的にブロック タグとインライン タグの 2 種類に分...

Vue画像拡大鏡コンポーネントのカプセル化と使用方法の詳細な説明

Vue画像拡大鏡コンポーネントパッケージに基づいて、参考までに具体的な内容は次のとおりです。画像拡大...

ブラウザでTIF形式の画像を表示する方法

ブラウザはTIF形式の画像を表示しますコードをコピーコードは次のとおりです。 <html>...

Vueはページの部分的なリフレッシュを実装します(ルータビューのページリフレッシュ)

Vue でprovide+inject組み合わせを使用するまず、App.vue を変更する必要があ...

docker compose を使ってワンクリックで分散構成センター Apollo を展開するプロセスの詳細な説明

導入分散について話すときは、分散構成センター、分散ログ、分散リンク トラッキングなどについて考える必...

JavaScript スコープチェーンの基本原理のグラフィカルな説明

目次序文範囲1. スコープとは何ですか? 2. [[スコープ]] プロパティ3. スコープチェーン4...

CSS3 グラデーション背景の互換性の問題

グラデーションの背景色を作成するときは、 linear-gradient() 関数を使用して線形グラ...

CSSのline-heightとheightの詳細な説明

最近、CSS インターフェースに取り組んでいるときに、line-height と height とい...

Vue プロジェクトで mock を使用する方法をご存知ですか?

目次最初のステップ: 2 番目のステップは、request.js で関連する構成を行うことです。re...