Making Toggling Element Containing Table Stop Changing Column Widths

Best descriped by a live example. I spent several hours trying various combinations of width specification - with px, % - trying to stop column change its width depending on whethe

Solution 1:

Simply giving that column a width does the trick:

#tasks_for_myself_table.task_editing {
  width: 1.5em;
}

I would probably apply that class to the th as well, but it doesn't seem to matter.

At least for me in the snippet below, a height might be useful as well. I didn't add one, but I note the row is slightly taller when the icon is showing, so you may want one.

$(function() {
  $(document).on('mouseover', '#tasks_for_myself_table tbody tr', function(e) {
    set_task_editor_icon_visibility($(this))
  });
  $(document).on('mouseout', '#tasks_for_myself_table tbody tr', function(e) {
    set_task_editor_icon_visibility($(this))
  });
});


var set_task_editor_icon_visibility = function($row) {
  $row.find('td.task_editing').toggleClass('glyphicon glyphicon-pencil');
}

#tasks_for_myself_table.task_editing {
  width: 1.5em;
}

<linkhref="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"rel="stylesheet"/><tableid="tasks_for_myself_table"class="table table-hover table-condensed draggable"><thead><thclass='task_editing'></th><th></th></thead><tbody><!-- If there are any initiated tasks at all --><tr><tdclass='task_editing'></td><td>AAAAA</td></tr><tr><tdclass='task_editing'></td><td>AAAAA</td></tr></tbody></table><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>