css中如何让td的宽度可变

在CSS中，我们可以借助于一些特殊的属性实现这一需求。具体操作如下：

 table {
    width: 100%;
    border-collapse: collapse; /* 把边框合并为一条线 */
  }
  
  th, td {
    padding: 10px; /* 设置单元格的内边距 */
    border: 1px solid #ddd; /* 给单元格添加边框 */
  }
  
  /* 设定表格中第一列的宽度 */
  td:first-child {
    width: 20%;
    min-width: 100px; /* 设定最小宽度 */
    max-width: 40%; /* 设定最大宽度 */
  }
  
  /* 给表头单元格设置可拖动光标 */
  th:first-child {
    cursor: col-resize;
  }
  
  /* 设定宽度拖拽效果 */
  th:first-child:hover {
    background-color: #eee;
  }
  
  th:first-child:active {
    background-color: #ccc;
  } 

通过以上CSS代码，我们可以实现以下效果：

以上就是让