製作切換元素包含表格停止更改列寬

Question

最好用現場示例描述。 我花了幾個小時嘗試寬度規格的各種組合 - 與px，％ - 試圖停止列的寬度取決於它是否應用了符號圖形文字鉛筆類 。如果您不將鼠標放在桌子上，則與將鼠標放在桌子上的情況相比，它的寬度更窄。

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