css td变为可编辑

CSS 是前端开发中必不可少的一部分，而让表格中的 td 变为可编辑的也是 CSS 中常见的操作。通过以下代码，你可以在表格中实现 td 的编辑：

td {
    padding: 5px;
    border: 1px solid #ccc;
}

td:before {
    content: attr(data-value);
}

td.editing {
    border-color: #555;
}

td.editing:before {
    content: '';
}

td.editing input[type="text"] {
    width: 100%;
    padding: 5px;
    border: 0;
    background-color: #eee;
}

td.editing input[type="text"]:focus {
    outline: 0;
    background-color: #fff;
}

上述代码中，我们对 td 进行了样式设置，可以自定义边框、内边距、字体等属性，同时通过使用 :before 伪元素，将表格内容显示为文本，实现了预览效果。

当需要编辑时，只需要通过 JavaScript 将 td 元素添加 editing 类名即可。此时，我们通过 :before 和 input 标签配合，使表格单元格变为空内容并添加一个输入框，达到可编辑的效果。

使用上述方法，你可以方便地实现表格中的单元格编辑，为开发和用户带来更好的使用体验。