Question

我有一个包含6列的表格，其中一列可以编辑。我通过在可编辑列的 td 单元格中隐藏输入来执行此操作，并在单击编辑按钮时显示它。但是当我显示输入字段时，列的宽度会增加。即使内容的宽度增加，如何强制列保持固定？

我正在使用jQuery和Bootstrap。但任何解决方案都会有所帮助。

HTML：

  <div class="container">
      <table class="table">
         <thead>
              <tr>
                 <th class="col-xs-2">A</th>
                 <th class="col-xs-2">B</th>
                 <th class="col-xs-2">C (edit)</th>
                 <th class="col-xs-2">D</th>
                 <th class="col-xs-2">E</th>
                 <th class="col-xs-2">F</th>
              </tr>
           </thead>
           <tbody>
              <tr>
                 <td class="col-xs-2">(1,1)</td>
                 <td class="col-xs-2">(1,2)</td>
                 <td class="col-xs-2">
                    <div class="DIV_READ">(1,3)</div>
                    <div class="DIV_EDIT" style="display: none;">
                       <input value="(1,3)" />
                    </div>
                 </td>
                 <td class="col-xs-2">(1,4)</td>
                 <td class="col-xs-2">(1,5)</td>
                 <td class="col-xs-2">(1,6)</td>
              </tr>
              <tr>
                 <td class="col-xs-2">(2,1)</td>
                 <td class="col-xs-2">(2,2)</td>
                 <td class="col-xs-2">
                    <div class="DIV_READ">(2,3)</div>
                    <div class="DIV_EDIT" style="display: none;">
                       <input value="(2,3)" />
                    </div>
                 </td>
                 <td class="col-xs-2">(2,4)</td>
                 <td class="col-xs-2">(2,5)</td>
                 <td class="col-xs-2">(2,6)</td>
              </tr>
         </tbody>
      </table>
    </div> 

  <button id="EDIT_BTN" >edit</button>

JS：

$(document).ready(function(){
  $("#EDIT_BTN").click(function(){
    $(".DIV_READ").toggle();
    $(".DIV_EDIT").toggle();
  });
});

Answer 1

您可以简单地将表格单元格内的输入设置为表格单元格本身的100％宽度：）

td * {
  width: 100%;
}

希望这有帮助！

Answer 2

您可以减小输入元素的宽度和高度。

input {
  max-width: 40px;
  max-height: 20px;
}

如何强制表格列的宽度始终固定

2 个答案:

JSFIDDLE