一排高度和宽度相等的两个内联按钮

Question

How to achieve this使用Bootstrap框架？

P.S。单元格内嵌2个按钮，高度= row.height，宽度=高度。

<table id="mytable" class="table table-bordered tableEmployee">
<thead>
    <th>E-mail</th>
</thead>
<tbody>
    <tr>
        <td>tt@gmail.com
                        <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

Answer 1

请试试这个。内联按钮的高度与行高相同。

<table id="mytable" class="table table-bordered tableEmployee">
<thead>
    <th>E-mail</th>
</thead>
<tbody>
    <tr>
        <td>tt@gmail.com
            <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>

您也可以根据需要设置宽度。

Answer 2

首先删除行的填充。

private int r1 = 0;
private int r2 = 0;

private int x = 0;
private int y = 0;

接下来给按钮tr，td。

赋予属性

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

看一看https://jsfiddle.net/sifat/jjawb8s7/3/

或使用javaScript

td{ height:40px; } button{ height:100%; //height of button=height of td width:40px; /manually assign the width same as td } 获取td的高度，document.getElementsByTagName("td")[0].offsetHeight为其指定宽度！