在网页开发中，有时候需要实现表格的列宽可拖动。这个功能可以通过使用CSS和JavaScript实现。
首先，在CSS中为表格中的td元素设置样式。

p {
border: 1px solid black;
padding:10px;
}
<br>
td {
border: 1px solid black;
padding: 5px;
position: relative;
}

其中，position属性用于设置元素的定位方式，我们可以根据需要设置为relative或者absolute。接下来，我们需要为每个td元素添加一个可拖动的控制器。

<td>  
<div class="resizer"></div>  
林冲  
</td>

上述代码中，我们为td元素添加了一个div元素，用于作为可拖动的控制器。我们为这个div定义了一个class类名为“resizer”。
最后，我们需要使用JavaScript来实现拖动控制器时改变td元素的宽度。

const resizers = document.querySelectorAll('.resizer')
let currentResizer
<br>
for(let resizer of resizers) {
resizer.addEventListener('mousedown', function(event) {
currentResizer = event.target
const td = currentResizer.parentElement
const startX = event.pageX
const tdWidth = td.offsetWidth
<br>
        document.addEventListener('mousemove', resize)
document.addEventListener('mouseup', stopResize)
<br>
        function resize(event) {
const diffX = event.pageX - startX
td.style.width = tdWidth + diffX + 'px'
}
<br>
        function stopResize() {
document.removeEventListener('mousemove', resize)
document.removeEventListener('mouseup', stopResize)
}
})
}

上述代码中，我们首先获取所有class为“resizer”的控制器。然后，给每个控制器添加mousedown事件。在mousedown事件中，获取当前控制器所在的td元素、当前鼠标位置和td元素当前的宽度。接着，在document上添加mousemove和mouseup事件，分别对应鼠标拖动和松开事件。在鼠标拖动事件中，计算出鼠标拖动的距离，并将td元素的宽度设置为原始宽度加上拖动距离。鼠标松开事件中，移除鼠标拖动和松开事件的监听器。
通过上述代码，我们就成功实现了表格中的列宽可拖动的功能。