JavaScriptを使用して表を作成するときに行の高さを設定する方法-フロントエンドQ&A-php.cn

JavaScriptを使用して表を作成するときに行の高さを設定する方法

PHPz

リリース： 2023-04-18 17:03:32

オリジナル

1427 人が閲覧しました

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 サイトの他の関連記事を参照してください。