向没有样式的表添加输入

时间:2017-01-15 05:54:29

标签: html css

我正在向表格td添加输入,但我想以与简单单元格相同的方式显示它。这是我的代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="table">
  <thead>
    <tr>
      <td>Some Text</td>
    </tr>
  </thead>
  <tbody id="Body">
    <tr>
      <td><input disabled style="with:100%;" value="data" /></td>
    </tr>
  </tbody>
</table>

简单来说,我希望将其显示为文本,而不是显示边框和背景。我尝试添加outline: none但没有任何事情发生。

1 个答案:

答案 0 :(得分:3)

修复样式需要做的3件事:

  1. 使用border: none
  2. 删除边框
  3. 使用background: none
  4. 删除背景
  5. 添加color: initial以删除来自已禁用输入的灰色颜色
  6. 工作代码段

    &#13;
    &#13;
    input {
      border: none;
      background: none;
      color: initial;
    }
    &#13;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <table id="table">
      <thead>
        <tr>
          <td>Some Text</td>
        </tr>
      </thead>
      <tbody id="Body">
        <tr>
          <td>
            <input disabled style="with:100%;" value="data" />
          </td>
        </tr>
      </tbody>
    </table>
    &#13;
    &#13;
    &#13;