嘿，我来帮你一步步搞定这两个问题！先解决列宽调整无效的坑，再修复GetSport函数的故障～

问题1：第0列列宽无法调整的解决办法 #

你之前的CSS没生效，主要是踩了三个小坑：

1. CSS选择器用错了：你给图片加了个div="Sport"的属性（还写错了属性名…），然后写Sport { ... }——这是把Sport当成HTML标签来选，但它根本不是标签啊！正确的做法是给**第0列的单元格（td）**加类名，然后用类选择器.Sport写样式。
2. CSS语法有错误：width: 20 px;里的空格要删掉，应该是width: 20px;，空格会让CSS解析失败。
3. 表格默认布局的锅：表格默认是table-layout: auto;，会根据内容自动撑宽，建议改成table-layout: fixed;，这样你设置的列宽才会真正生效。

具体修改：

• 你已经给单元格加了类名cells[0].classList.add('Sport');，这步是对的，不用改。
• 修正你的CSS：

#Table1 {
  table-layout: fixed; /* 固定布局，让列宽设置不被内容干扰 */
  width: 100%; /* 给表格一个总宽度，不然fixed布局可能失效 */
}
.Sport {
  width: 20px; /* 去掉空格！ */
  margin-right: 30px; /* 表格里用px比%更靠谱，避免奇怪的自适应 */
  border: 1px solid #000;
}
/* 再加个图片样式，防止图片超出单元格 */
.Sport img {
  width: 100%;
  height: auto;
}

问题2：GetSport函数故障修复 #

你的GetSport函数有几个隐形问题，我帮你逐个排查修复：

1. 重复声明变量的隐患 #

你写了两次var x = ...，虽然JS不会报错，但这种写法容易搞混变量，改成单变量声明：

function GetSport(val) {
  let x = val.id; // 用let代替var，避免全局污染
  x = x.replace("id", ""); // 去掉前面的var
  const table = document.getElementById("Table1"); // 加const，更规范
  // ... 剩下的代码
}

2. 全局变量i导致的索引混乱 #

你的for循环里用了for (i = 0; i < 13; i++)，没有加var或let，导致i变成了全局变量！多次添加行后，这个全局i可能会干扰行索引的计算，改成：

for (let i = 0; i < 13; i++) { // 加上let，把i变成循环内的局部变量
  cells.push(row.insertCell(i));
}

3. 事件绑定方式不够可靠 #

用setAttribute绑定onchange事件不如用addEventListener稳定，修改下拉框的事件绑定代码：

// 替换原来的dd.setAttribute("onchange", "GetSport(this)");
dd.addEventListener('change', function() {
  GetSport(this);
});

4. 可选优化：根据选项切换对应图片 #

你现在不管选什么都显示ball.png，可以改成根据下拉选项切换不同图片，让功能更完整：

function GetSport(val) {
  let x = val.id;
  x = x.replace("id", "");
  const table = document.getElementById("Table1");
  // 用对象映射选项值和图片路径
  const imgMap = {
    "value1": "Images/soccer.png", // Soccer对应足球图
    "value2": "Images/basketball.png", // Basket对应篮球图
    "value3": "Images/hockey.png" // Hockey对应曲棍球图
  };
  // 拿到对应图片路径，默认显示ball.png
  const imgSrc = imgMap[val.value] || "Images/ball.png";
  table.rows[x - 1].cells[0].innerHTML = `<img src="${imgSrc}" />`;
}

最后提醒：确保表格初始结构正确 #

你说没加建议的HTML表格结构，一定要确保页面里有正确的<table id="Table1">，不然JS找不到元素，所有功能都白搭：

<table id="Table1">
  <tr>
    <td colspan="13">OLD ROW</td> <!-- 你现在是13列，所以colspan要改成13哦 -->
  </tr>
</table>
<br/>
<input type="button" onclick="myFunction2()" value="add a new row" />

这样调整后，列宽应该能正常生效，GetSport函数也能正确切换图片啦～

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