无法关联CSS/JS至HTML，求高效实现可调整大小HTML表格方案

首先咱们先拆解你遇到的问题，一步步解决：

一、资源加载失败的核心原因及修复 #

你提到CSS和JS没加载成功，结合代码来看，主要有几个关键问题：

1. HTML标签属性拼写错误
   你的<link>标签里写的是ref="stylesheet"，这是低级错误！正确的属性应该是rel="stylesheet"——浏览器识别不了错误的属性，自然会忽略这个CSS引用。

2. 缺少必要的依赖库
   你的JS代码用了$()（jQuery的入口函数）和.resizable()（jQuery UI的方法），但HTML里完全没引入jQuery和jQuery UI！没有这两个依赖，你的JS代码根本跑不起来，甚至不会执行。

3. 路径验证建议
   虽然你说Chrome没报错，还是建议打开开发者工具的Network标签，刷新页面看资源请求状态：

   • 如果是404，说明文件路径不对（比如HTML在子文件夹里，路径要改成../css/democss.css这种相对路径）；
   • 如果是200但样式/功能没生效，再检查文件内容是否正确。

二、表格结构错误修复 #

你的HTML表格里，<tbody>直接包裹了<td>标签，这不符合HTML规范！<td>必须放在<tr>里面，否则表格渲染会异常，也会影响JS对元素的选择。

三、修正后的完整代码示例 #

调整后的HTML #

<!DOCTYPE html>
<html>
<head>
    <!-- 先引入jQuery和jQuery UI依赖 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <!-- 修正rel属性的CSS引用 -->
    <link rel="stylesheet" type="text/css" href="css/democss.css">
    <!-- 引入自定义JS -->
    <script type="text/javascript" src="js/demojs.js"></script>
</head>
<body>
    <table id="demo-table" class="bordered cellpadding-0 cellspacing-0">
        <thead>
            <tr>
                <th id='column-header-1'>Column Header 1<div id='column-header-1-sizer'></div></th>
                <th id='column-header-2'>Column Header 2<div id='column-header-2-sizer'></div></th>
                <th id='column-header-3'>Column Header 3<div id='column-header-3-sizer'></div></th>
                <th id='column-header-4'>Column Header 4<div id='column-header-4-sizer'></div></th>
            </tr>
        </thead>
        <tbody>
            <!-- 修复：td必须包裹在tr内 -->
            <tr>
                <td>My Data 1</td>
                <td>My Data 2</td>
                <td>My Data 3</td>
                <td>My Data 4</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

补充优化后的CSS（增加拖拽手柄样式） #

body { font-family: Arial; font-size: 10pt; }
table#demo-table th { background-color: #006; color: #fff; position: relative; } /* 新增相对定位，让拖拽手柄生效 */
table#demo-table th, table#demo-table td { white-space: nowrap; padding: 3px 6px; }
table.cellpadding-0 td { padding: 0; }
table.cellspacing-0 { border-spacing: 0; border-collapse: collapse; }
table.bordered th, table.bordered td { border: 1px solid #ccc; border-right: none; text-align: center; }
table.bordered th:last-child, table.bordered td:last-child { border-right: 1px solid #ccc; }
/* 新增拖拽手柄样式 */
table#demo-table th div {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background-color: rgba(0,0,0,0.1);
}

你的JS代码可直接保留（依赖引入后即可生效） #

$(function(){
    var thHeight = $("table#demo-table th:first").height();
    $("table#demo-table th").resizable({
        handles: "e",
        minHeight: thHeight,
        maxHeight: thHeight,
        minWidth: 40,
        resize: function (event, ui) {
            var sizerID = "#" + $(event.target).attr("id") + "-sizer";
            $(sizerID).width(ui.size.width);
        }
    });
});

四、更高效的无依赖实现（原生JS） #

如果不想依赖jQuery和jQuery UI，用原生JS实现会更轻量、性能更好，这里给你一个简洁的方案：

document.addEventListener('DOMContentLoaded', function() {
    const table = document.getElementById('demo-table');
    const headers = table.querySelectorAll('th');
    
    headers.forEach((header, index) => {
        // 创建拖拽手柄
        const resizer = document.createElement('div');
        resizer.classList.add('resizer');
        header.appendChild(resizer);
        
        let startX, startWidth;
        
        // 鼠标按下触发拖拽
        resizer.addEventListener('mousedown', function(e) {
            startX = e.pageX;
            startWidth = header.offsetWidth;
            document.addEventListener('mousemove', resizeColumn);
            document.addEventListener('mouseup', stopResize);
            e.preventDefault();
        });
        
        // 调整列宽逻辑
        function resizeColumn(e) {
            const width = startWidth + (e.pageX - startX);
            header.style.width = `${width}px`;
            // 同步调整对应列的所有单元格宽度
            const cells = table.querySelectorAll(`tbody tr td:nth-child(${index + 1})`);
            cells.forEach(cell => cell.style.width = `${width}px`);
        }
        
        // 停止拖拽
        function stopResize() {
            document.removeEventListener('mousemove', resizeColumn);
            document.removeEventListener('mouseup', stopResize);
        }
    });
});

对应的CSS只需添加拖拽手柄样式：

.resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background-color: rgba(0,0,0,0.1);
}
th {
    position: relative;
}

这种原生实现不需要任何外部依赖，加载更快，也更易维护~

内容的提问来源于stack exchange，提问作者user3436422