通過使用Bootstrap框架，在同一高度和寬度的一行內的兩個內聯按鈕

How to achieve this？通過使用Bootstrap框架，在同一高度和寬度的一行內的兩個內聯按鈕

P.S. 2個按鈕嵌入單元格中，高度= row.height，寬度= height。

<table id="mytable" class="table table-bordered tableEmployee"> 
<thead> 
    <th>E-mail</th> 
</thead> 
<tbody> 
    <tr> 
     <td>[email protected] 
         <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit"><span class="glyphicon glyphicon-pencil"></span></button> 
      <button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete"><span class="glyphicon glyphicon-trash"></span></button> 
     </td> 
    </tr> 
</tbody>

fiddle

來源

2016-09-22 spbsmile

請創建一個小提琴或您的問題或分享您的代碼。 –

至少提供示例代碼，以便我們能夠爲您提供幫助 –

添加小提琴示例代碼@sumitchoudhary – spbsmile

首先刪除該行的填充。

table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { 
    padding:0px !important; 
}

接下來將屬性賦予按鈕tr，td。

td{ 
    height:40px; 
} 

button{ 
    height:100%; //height of button=height of td 
    width:40px; /manually assign the width same as td 

}

採取偷看https://jsfiddle.net/sifat/jjawb8s7/3/

或使用JavaScript

document.getElementsByTagName("td")[0].offsetHeight獲得TD和document.getElementsById("button1").style.width的高度來分配寬度吧！

來源

2016-09-22 15:54:03

請試試這個。內聯按鈕的高度與行高相同。

<table id="mytable" class="table table-bordered tableEmployee"> 
<thead> 
    <th>E-mail</th> 
</thead> 
<tbody> 
    <tr> 
     <td>[email protected] 
      <button class="btn btn-primary btn-xs inline" data-title="Edit" data-toggle="modal" data-target="#edit"><span class="glyphicon glyphicon-pencil"></span></button> 
      <button class="btn btn-danger btn-xs inline" data-title="Delete" data-toggle="modal" data-target="#delete"><span class="glyphicon glyphicon-trash"></span></button> 
     </td> 
    </tr> 
</tbody>

您還可以根據需要設置寬度。

來源

2016-09-22 14:40:18

@spbsmile接受答案，如果這解決了你的問題 –

通過使用Bootstrap框架，在同一高度和寬度的一行內的兩個內聯按鈕

回答

相關問題