突破编程_前端_JS编程实例（自适应表格列宽）

breakthrough_01

已于 2024-03-09 14:50:17 修改

阅读量1.5k

点赞数 20

分类专栏：突破编程_前端_JS编程实例文章标签：前端 javascript 开发语言

于 2024-03-08 15:12:18 首次发布

本文链接：https://blog.csdn.net/h8062651/article/details/136562903

版权

突破编程_前端_JS编程实例专栏收录该内容

6 篇文章

订阅专栏

本文描述了一种JavaScript实现的表格组件，它可以根据容器宽度动态调整HTML表格的列宽，确保表格自适应且列宽合理。通过获取最长字符串宽度，遵循特定规则（如最小显示宽度和列宽比例）来调整列宽，以充分利用容器空间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 开发目标

针对如下的表格组件：

在这里插入图片描述

根据表格的各个列字符串宽度动态调整表格列宽：

在这里插入图片描述

2 详细需求

本组件目标是提供一个自动调整 HTML 表格列宽的解决方案，通过 JS 实现动态计算并调整表格每列的宽度，以使得表格能够自适应容器宽度，同时保持列宽的合理性。

2.1 容器与表格元素获取

组件需根据传入的容器获取其子元素集合中的表格元素。
计算每列中最长字符串所占的宽度：最长字符串宽度的计算应基于字符串的渲染宽度，而非简单的字符数，以考虑不同字符宽度的差异。

2.2 列宽调整规则

组件需根据计算出的每列最长宽度，调整每一列的列宽。
调整后的表格宽度需占满其父容器的宽度。
若所有列的最长宽度之和不大于传入容器的宽度，则按照各自最长宽度所占的比例调整每一列的列宽，以确保表格充分利用可用空间。
若所有列的最长宽度之和大于传入容器的宽度，则按照以下优先级进行调整：
- 最长宽度不大于 100px 的列，直接按其最长宽度设置列宽。
- 对于其他列，按照各自最长宽度所占的比例调整列宽，以在有限的空间内尽可能保持列宽的合理性。
- 若全部最长宽度不大于 100px 的列的列宽之和已经大于传入容器的宽度，则所有列均按照各自最长宽度所占的比例调整列宽，以确保表格不会超出容器宽度。

3 代码实现

首先创建一个 neat_tableparse.js 文件，该文件用于本组件的工具类、表格自适应处理函数的代码构建。

（1）在具体的业务代码编写之前，先实现一个工具类以及一些工具方法，方便后面调用：

class CommonUtil {

    // 计算文本在页面所占 px 宽度
    static calcTextWidth(str, fontSize) {
        let span = document.createElement('span');
        document.body.appendChild(span);
        span.innerHTML = str;
        span.style.visibility = 'hidden';
        if(fontSize){
            span.style.fontSize = fontSize;
        }
        let width = span.offsetWidth;
        document.body.removeChild(span);
        return width;
    }
}

（2）接下来，定义一个处理表格自适应列宽的函数：

function parseTable(table) {
    // 最长宽度不大于该变量的列，直接按其最长宽度设置列宽
    // 若全部最长宽度不大于该变量的列的列宽之和已经大于传入容器的宽度，则所有列均按照各自最长宽度所占的比例调整列宽，以确保表格不会超出容器宽度
    const miniShowWidth = 100;

其中，定义了一个变量 miniShowWidth，该变量是指：最长宽度不大于该变量的列，直接按其最长宽度设置列宽。

（3）然后，获取每列最长宽度，将其存入 colMaxWidths 数组中：

	// 获取每列最长宽度，将其存入 colMaxWidths 数组中
    let colMaxWidths = [];
    let trs = table.getElementsByTagName('tr');
    if (!trs) {
        return;
    }
    for (let i = 0; i < trs.length; i++) {
        const tr = trs[i];
        let objs = null;
        objs = tr.getElementsByTagName('th');
        if (!objs || objs.length == 0) {
            objs = tr.getElementsByTagName('td');
        }
        if (!objs || objs.length == 0) {
            return;
        }
        if (objs.length > 0) {
            for (let index = 0; index < objs.length; index++) {
                const obj = objs[index];
                if (colMaxWidths.length <= index) {
                    colMaxWidths.push(0);
                }
                let width = CommonUtil.calcTextWidth(obj.innerText) + 16 ;   //这里的 16 是在 css 中定义的 padding
                colMaxWidths[index] = (colMaxWidths[index] > width) ? colMaxWidths[index] : width;
            }
        }
    }

（4）本函数是通过对 colgroups 的子元素 col 的宽度设置来控制表格列宽的自适应，所以接下来需要获取或创建 colgroup 元素，以及创建或补齐 col 元素：

	// 获取或创建 colgroup 元素
    let colgroups = table.getElementsByTagName('colgroup');
    if (!colgroups || 0 == colgroups.length) {
        let colgroup = document.createElement('colgroup');
        table.appendChild(colgroup);
        colgroups = table.getElementsByTagName('colgroup');
    }
    // 创建或补齐 col 元素
    let cols = colgroups[0].getElementsByTagName('col');
    let colNum = cols ? cols.length : 0;
    for (let index = colNum; index < colMaxWidths.length; index++) {
        let col = document.createElement('col');
        colgroups[0].appendChild(col);
    }
    cols = colgroups[0].getElementsByTagName('col');

（5）根据需求中对不同宽度的列处理，首先需要获取父容器宽度以及获取所有列的最长宽度之和：

	// 获取父容器宽度
    let parentWidth = table.parentElement.offsetWidth;

    // 获取所有列的最长宽度之和
    let sumColMaxWidth = 0;
    colMaxWidths.forEach(element => {
        sumColMaxWidth += element;
    });

（6）若所有列的最长宽度之和不大于传入容器的宽度，则按照各自最长宽度所占的比例调整每一列的列宽：

	if (sumColMaxWidth <= parentWidth) {    // 若所有列的最长宽度之和不大于传入容器的宽度，则按照各自最长宽度所占的比例调整每一列的列宽
        for (let index = 0; index < colMaxWidths.length; index++) {
            cols[index].width = (colMaxWidths[index] / sumColMaxWidth) * parentWidth + 'px';
        }
    }

（7）否则则处理全部最长宽度不大于 miniShowWidth 的列的列宽之和小于传入容器的宽度：

	else {
        // 获取所有列的最长宽度不大于 miniShowWidth 的列的列宽之和
        let sumColMiniShowWidth = 0;
        let sumOtherColsMaxWidth = 0;
        colMaxWidths.forEach(element => {
            if(element <= miniShowWidth){
                sumColMiniShowWidth += element;
            }else{
                sumOtherColsMaxWidth += element;
            }
        });

        if(sumColMiniShowWidth < parentWidth){ //若全部最长宽度不大于 miniShowWidth 的列的列宽之和小于传入容器的宽度
            let parentWidthOffset = parentWidth-sumColMiniShowWidth;
            for (let index = 0; index < colMaxWidths.length; index++) {
                if(colMaxWidths[index] > miniShowWidth && sumOtherColsMaxWidth>0){
                    cols[index].width = (colMaxWidths[index] / sumOtherColsMaxWidth) * parentWidthOffset + 'px';
                }else{
                    cols[index].width = miniShowWidth + 'px';
                }
            }
        }

（8）最后处理若全部最长宽度不大于 sumColMaxWidth 的列的列宽之和已经大于传入容器的宽度，则所有列均按照各自最长宽度所占的比例调整列宽，以确保表格不会超出容器宽度：

		else{  // 若全部最长宽度不大于 sumColMaxWidth 的列的列宽之和已经大于传入容器的宽度，则所有列均按照各自最长宽度所占的比例调整列宽，以确保表格不会超出容器宽度。
            for (let index = 0; index < colMaxWidths.length; index++) {
                cols[index].width = (colMaxWidths[index] / sumColMaxWidth) * parentWidth + 'px';
            }
        }
    }
}

至此，整个处理表格自适应列宽的函数构建结束。

（9）完成自适应表格列宽函数的代码编写后，可以创建 neat_tableparse.html 文件，调用该函数：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>header tab</title>
    <style>
        html {
            height: 100%;
        }

        body {
            margin: 0;
            height: 100%;
        }
		table {  
	        border-collapse: collapse;
	    } 
        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
            word-break: break-all;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
    <div id="divMain" style="margin-top: 100px;margin-left: 100px;height: 400px;width: 600px;border: 1px solid #aaa;overflow: hidden;">
        <table cellspacing="0" >
            <thead>
                <tr>
                    <th>col1</th>
                    <th>col2列2</th>
                    <th>col3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>val_1_1</td>
                    <td>val_1_2</td>
                    <td>val_1_3</td>
                </tr>
                <tr>
                    <td>val_2_1</td>
                    <td>val_2_2</td>
                    <td>val_2_322222222222222</td>
                </tr>
                <tr>
                    <td>val_3_1</td>
                    <td>val_3_2</td>
                    <td>val_3_3</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script src="./test.js"></script>
<script>
    let container = document.getElementById('divMain');
    let tables = container.querySelectorAll("table");
    tables.forEach(element => {
        parseTable(element);
    });
</script>

</html>