Search code examples
htmlcssangularhtml-table

how to prevent table column width increase when a icon dynamically added inside the cell

The table I have, its header is clickable and by clicking, it do the ordering. So when click the title of the header it add icon(asc or dsc icon) to the right of the title as a result it also increase the width of that column based on the icon size. Like below image:

enter image description here

enter image description here

from the above picture you can see that when I click "Funded amount" column I am adding a asc/dsc icon as a result it also pushes the width of that column. What I want is that, while adding this icon it shouldn't increase/pushes the width of the column.

I didn't give any code as it just a simple table with some generic css and I am also not using bootstrap as well.

Solution

  • Instead of adding / removing the symbols, just hide / show them with the css property visibility. When they are hidden they will still take up space.

    .arrow.hidden {
  visibility: hidden;
}

.arrow.visible {
  visibility: visible;
}

    Docs: https://www.w3schools.com/cssref/pr_class_visibility.asp