How to set the width of td in javascript-Front-end Q&A-php.cn

How to set the width of td in javascript

PHPz

Release： 2023-04-24 16:53:04

Original

1608 people have browsed it

JavaScript is a widely used programming language used to develop websites and applications. One of the common web design questions is how to set the width of a cell (td) in a table. This article will introduce how to set the width of td using JavaScript.

First, let's take a look at the HTML code to show a basic web page layout containing a table:

<!DOCTYPE html>
<html>
<head>
    <title>设置td宽度</title>
</head>
<body>
    <table>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td>单元格6</td>
        </tr>
    </table>
</body>
</html>

Copy after login

In this basic web page layout, we have a table with two rows and three columns. Now we want to set the width of one of the cells. We can achieve this through the following steps:

The first step is to set an id for each td element. For example, if we want to set the width of cell 2, we can modify the html code to the following form:

<!DOCTYPE html>
<html>
<head>
    <title>设置td宽度</title>
</head>
<body>
    <table>
        <tr>
            <td id="cell1">单元格1</td>
            <td id="cell2">单元格2</td>
            <td id="cell3">单元格3</td>
        </tr>
        <tr>
            <td id="cell4">单元格4</td>
            <td id="cell5">单元格5</td>
            <td id="cell6">单元格6</td>
        </tr>
    </table>
</body>
</html>

Copy after login

The second step is to set the cell width using JavaScript code. We can get a reference to cell 2 using the getElementById() function in JavaScript and set its width using a CSS property. For example, the following JS code sets the width of cell 2 to 200 pixels:

var cell2 = document.getElementById("cell2");   // 获取单元格2的引用
cell2.style.width = "200px";                     // 设置单元格2的宽度为200像素

Copy after login

The third step is to embed the above code in HTML. Add the following code in the head tag:

<!DOCTYPE html>
<html>
<head>
    <title>设置td宽度</title>
    <script type="text/javascript">
        window.onload = function() {
            var cell2 = document.getElementById("cell2");
            cell2.style.width = "200px";
        };
    </script>
</head>
<body>
    <table>
        <tr>
            <td id="cell1">单元格1</td>
            <td id="cell2">单元格2</td>
            <td id="cell3">单元格3</td>
        </tr>
        <tr>
            <td id="cell4">单元格4</td>
            <td id="cell5">单元格5</td>
            <td id="cell6">单元格6</td>
        </tr>
    </table>
</body>
</html>

Copy after login

The above code sets the width of cell 2 to 200 pixels. Now, when we open the page, we will see that the width of cell 2 has been set to 200 pixels.

Through the above steps, we can use JavaScript to set the width of the cell (td) in the table. By getting a reference to a cell and using CSS properties to set the cell's width, we can effectively resize the cell to fit the design needs.

The above is the detailed content of How to set the width of td in javascript. For more information, please follow other related articles on the PHP Chinese website!