Question

最好用实例来描述。我花了几个小时尝试各种宽度规格组合 - 用px，％ - 试图阻止列改变其宽度取决于是否它是否应用了glyphicon glyphicon-pencil类。如果您没有将鼠标聚焦在桌面上，则与将鼠标放在桌面上的情况相比，它的宽度更窄。

$(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');
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class = 'container'>
<div class = 'row'>
<div class = 'col-sm-9'>  
<table id="tasks_for_myself_table" class="table table-hover table-condensed draggable">
  <thead>
    <th></th>
    <th></th>
  </thead>
  <tbody>
    <!-- If there are any initiated tasks at all -->
    <tr>
      <td style = 'width: 2em' class='task_editing'></td>
      <td>AAAAA</td>
      <td>BBBBBBB</td>
    </tr>
    <tr>
      <td style = 'width: 2em' class='task_editing'></td>
      <td>AAAAA</td>
      <td>BBBBBBBB</td>
    </tr>
  </tbody>
</table>
</div>
<div class = 'col-sm-3'>I love this site</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

JSFiddle

Answer 1

简单地给该列增加一个宽度就可以了：

#tasks_for_myself_table .task_editing {
  width: 1.5em;
}

我可能也会将该类应用于th，但似乎并不重要。

至少在下面的代码段中，height也可能有用。我没有添加一个，但我注意到图标显示时行略高，所以你可能想要一个。

$(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;
}

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

使包含表的切换元素停止更改列宽

1 个答案: