Home > Article > Web Front-end > How to set the row height when making a table using javascript
How to set the row height when making a table using javascript
- PHPzOriginal
- 2023-04-18 17:02:491415browse
When using JavaScript to create a table, setting the row height can help the table be more organized and beautiful.
There are two ways to set the row height: through CSS style sheets, or directly through JavaScript code.
- Set the row height through CSS style sheet
In the HTML file, you can use the following code to introduce the CSS style sheet:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
In style.css In the file, use the following code to set the row height of the table:
table {
border-collapse: collapse; /* 设置边框合并 */
}
table td {
border: 1px solid #ccc; /* 设置单元格边框 */
height: 30px; /* 设置行高为30像素 */
}
In this way, the row height set through the CSS style sheet will be applied to the entire table.
- Set row height through JavaScript code
In JavaScript code, use the following code to set the height of the table row:
var table = document.getElementById("myTable"); // 获取表格对象
for(var i = 0; i < table.rows.length; i++){ // 循环表格的每一行
var row = table.rows[i];
row.style.height = "30px"; // 设置行高为30像素
}
Here, we first get Table object, then use a for loop to traverse each row of the table, and use JavaScript's style attribute to set the row height to 30 pixels.
It should be noted that the row height set using JavaScript will only apply to the specific table object, not the table on the entire page.
Summary:
Whether it is set through a CSS style sheet or JavaScript code, setting the row height can help improve the readability and beauty of the table. It is recommended to use CSS style sheets to uniformly manage the style of the entire table. At the same time, specific styles can be set for individual table objects through JavaScript code.
The above is the detailed content of How to set the row height when making a table using javascript. For more information, please follow other related articles on the PHP Chinese website!