如何构建可手动填写文本的空DataTable？

你可以用HTML结合CSS来实现这种支持手动输入文本的空表格，以下是示例代码，样式接近你需要的效果：

<style>
  .editable-table {
    border-collapse: collapse;
    width: 100%;
    font-family: Arial, sans-serif;
  }
  .editable-table th, .editable-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  .editable-table th {
    background-color: #f2f2f2;
    font-weight: bold;
  }
  .editable-table input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: inherit;
  }
</style>

<table class="editable-table">
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
      <th>标题4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" placeholder="输入内容"></td>
      <td><input type="text" placeholder="输入内容"></td>
      <td><input type="text" placeholder="输入内容"></td>
      <td><input type="text" placeholder="输入内容"></td>
    </tr>
    <tr>
      <td><input type="text" placeholder="输入内容"></td>
      <td><input type="text" placeholder="输入内容"></td>
      <td><input type="text" placeholder="输入内容"></td>
      <td><input type="text" placeholder="输入内容"></td>
    </tr>
    <!-- 可根据需求添加更多行 -->
  </tbody>
</table>

简单说明 #

• 表头背景色、表格边框样式可通过修改CSS里的background-color、border属性调整，匹配你需要的外观
• 单元格内的输入框去除了边框和背景，和表格融为一体，支持手动输入文本
• 可根据实际需求增减表头列数、表格行数

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