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

Question

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

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

Here is a jsfiddle example

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%;
}

希望这对您有所帮助!