テーブル停止列幅を含むトグル要素を作成する

Question

実例で最もよく説明されています。 私は数時間かけて幅指定のさまざまな組み合わせを試しました--px、％ - 列の幅を変更しようとしましたが、 にglyphicon glyphicon-pencilクラスが適用されているかどうかによって幅が変わりました。テーブルにマウスを合わせないと、マウスをテーブルに置いた場合と比較して幅が狭くなります。私はおそらく同様にthにそのクラスを

#tasks_for_myself_table .task_editing { 
    width: 1.5em; 
} 

適用されるであろうが、それはdoesnの：単純に幅がトリックん、その列を与える

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

問題ではないようだ。

少なくとも下記のスニペットでは、heightも便利です。私は1つを追加しませんでしたが、アイコンが表示されているときに行が少し大きくなっていることに注意してください。

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