CSS firefox td cell button height

Question

I have one problem with CSS in Firefox. I need a button to full fill the table cell height. It works fine in Chrome, but not working in Firefox.

Firefox (incorrect):

Chrome (correct):

td - styles
table.custom-table-1 > tbody > tr > td.action {
    padding: 0px;
}
table.custom-table-1 > tbody > tr > td {
    font-size: 17px;
    padding: 5px 15px 2px;
}
.table-bordered > tbody > tr > td,{
    border: 1px solid #DDD;
}

button styles
table.custom-table-1 > tbody > tr > td.action > .btn {
    height: 100%;
    box-sizing: content-box;
    padding: 0px;
    border: medium none;
}
table.custom-table-1 > tbody > tr > td.action > .btn, .btn.delete {
    border-radius: 0px;
    margin-right: 0px;
    padding: 5px 10px;
    width: 33px;
    min-height: 33px;
}

HTML:

<td style="width: 30px;" class="action" > 
<button class="btn grey-silver"> 
  <span class="action"></span>
</button>   
</td>

Please provide any suggestions over this. Thank you.

You've provided CSS to style the `` and provided one `
` in your question. If you're showing us a `` being rendered correctly/incorrectly, please provide enough HTML and CSS that we can reproduce the visual structure you show. — David Thomas, Dec 08 '15 at 13:47
@AndreyP Please review my answer and let me know whether it resolves your problem or not. — zer00ne, Dec 08 '15 at 15:13

score 0 · Answer 1 · answered Dec 08 '15 at 13:42

0

you could try this.

td - styles

table.custom-table-1 > tbody > tr > td.action {
    padding: 0px;
}
table.custom-table-1 > tbody > tr > td {
    font-size: 17px;
    padding: 5px 15px 2px;
    position: relative; /* MAKE TD'S RELATIVE */
}
.table-bordered > tbody > tr > td,{
    border: 1px solid #DDD;
}

button styles
table.custom-table-1 > tbody > tr > td.action > .btn {
    height: 100%;
    box-sizing: content-box;
    padding: 0px;
    border: medium none;
    position: absolute; /* MAKE POSITION ABSOLUTE */
    width: 100%; /* WITH 100% WIDTH */
}
table.custom-table-1 > tbody > tr > td.action > .btn, .btn.delete {
    border-radius: 0px;
    margin-right: 0px;
    padding: 5px 10px;
    width: 33px;
    min-height: 33px;
}

answered Dec 08 '15 at 13:42

Aaron

10,187
3
23
39

@AndreyP Great, If you could mark my answer as "correct" by clicking the check mark next to my answer please. – Aaron Dec 08 '15 at 14:16
Unfotunately now button appeared 1px less that is needed :( https://i.gyazo.com/3f497163ade4295886348c2741a26826.png – Andrey P Dec 08 '15 at 14:27
change the `box-sizing` on the `.btn` to `box-sizing: border-box;` – Aaron Dec 08 '15 at 14:40

zer00ne · Answer 2 · 2015-12-08T15:07:49.427

2 things are needed so that cell height can be controlled in Firefox:

table { table-layout: fixed; }
A block (e.g. div) element inside a cell.

Simply increase the height of the block element and when it exceeds the height of the table-cell, it will stretch not only the cell, it will stretch the tr, tbody, and table. No overflow either.

Review the snippet in Firefox and Chrome.

function adjHeight(H) {
    var tgt = document.querySelector("div");
    tgt.style.height = H+'px';
}

var ha = document.getElementById('htAdj');
ha.addEventListener('input', function(event) {
  var H = ha.value;
  return adjHeight(H);
}, false);

table {
  table-layout: fixed;
  border: 1px solid blue;
  width: 200px;
  height: 40px;
  }
td {
  border: 1px solid green;
  }
div {
  border: 2px dashed red;
  height: 0;
  }
input {
  display: inline-block; 
  width: 130px;
  }

<label>Height: +
<input id="htAdj" type="number"></label>

<table>
  <tbody>
    <tr>
      <td>
        <div></div>
       </td>
      <td>
        <div></div>
       </td>
      <td>
        <div></div>
       </td>
      <td>
        <div></div>
       </td>
      <td>
        <div></div>
       </td>
      <td>
        <div></div>
       </td>
      </tr>
    </tbody>
  </table>

score 0 · Answer 3 · answered Jul 18 '17 at 07:23

0

You have to make the height of the parent of the button, in your case, the <td> element 100% as well. See this solution

answered Jul 18 '17 at 07:23

Pila

5,460
1
19
30

CSS firefox td cell button height

3 Answers3