0

Hi i have problem to make empty button in bootstrap table to 100% height. This is my case: jsfidle

I used this but empty button is not set on 100%

td{
  padding:0;
}

td button, td div{
  width:100%;
  height:100%;
}

table th, table td {
  padding: 0!important;
}
Young L.
  • 922
  • 3
  • 13
  • 33

2 Answers2

2

Another option is to just put a &nbsp; (non-breaking space) in the empty <Button> element:

<Button class="btn btn-success">&nbsp;</Button>

Fiddle for the nbsp method

Or you can use this css method which uses the ::before selector and the content property with an escaped unicode character. In this case \00a0 which is equivalent to &nbsp;

td button.btn.btn-success::before {
  content: '\00a0';
}

Fiddle for the css method

Rob Moll
  • 3,345
  • 2
  • 9
  • 15
0

To fix your issue on the empty button you should use a CSS, instead of giving the height to 100%, you can simply place a value in pixels for that for example 25px seems to work the case.

td{
  padding:0;
}

td button, td div{
  width:100%;
  height:25px;
}

table th, table td {
  padding: 0!important;
}

Here is the result of your question: https://jsfiddle.net/79jzkwup/

Pedro Carvalho
  • 112
  • 9
  • Not great answer becouse i don't know how many button will be in one column. (Two at least). But i think there is no better option so thank you – Young L. Apr 03 '20 at 00:43
  • You can add as many buttons as you want just as long you keep the settings as they are to meet your design, you can also add functions in the buttons if needed. Glad I could help you out. Good luck on your project. – Pedro Carvalho Apr 03 '20 at 01:17