ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使用して表を作成するときに行の高さを設定する方法
JavaScriptを使用して表を作成するときに行の高さを設定する方法
- PHPzオリジナル
- 2023-04-18 17:02:491376ブラウズ
JavaScript を使用してテーブルを作成する場合、行の高さを設定すると、テーブルがより整理されて美しくなります。
行の高さを設定するには、CSS スタイル シートを使用する方法と JavaScript コードを直接使用する方法の 2 つがあります。
- CSS スタイル シートを使用して行の高さを設定する
HTML ファイルでは、次のコードを使用して CSS スタイル シートを導入できます:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
In style.css ファイル内で、次のコードを使用してテーブルの行の高さを設定します。
table {
border-collapse: collapse; /* 设置边框合并 */
}
table td {
border: 1px solid #ccc; /* 设置单元格边框 */
height: 30px; /* 设置行高为30像素 */
}
これにより、CSS スタイル シートで設定された行の高さがテーブル全体に適用されます。
- JavaScript コードによる行の高さの設定
JavaScript コードでは、次のコードを使用してテーブルの行の高さを設定します。
var table = document.getElementById("myTable"); // 获取表格对象
for(var i = 0; i < table.rows.length; i++){ // 循环表格的每一行
var row = table.rows[i];
row.style.height = "30px"; // 设置行高为30像素
}
ここでは、まず Table オブジェクトを取得し、次に for ループを使用してテーブルの各行を走査し、JavaScript の style 属性を使用して行の高さを 30 ピクセルに設定します。
JavaScript を使用して設定された行の高さは、ページ全体のテーブルではなく、特定のテーブル オブジェクトにのみ適用されることに注意してください。
概要:
CSS スタイル シートで設定するか JavaScript コードで設定するかに関係なく、行の高さを設定すると、表の読みやすさと美しさが向上します。テーブル全体のスタイルを統一的に管理するには、CSS スタイル シートを使用することをお勧めしますが、同時に JavaScript コードを通じて個々のテーブル オブジェクトに特定のスタイルを設定することもできます。
以上がJavaScriptを使用して表を作成するときに行の高さを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。