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

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:

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.

CodePudding user response：

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

CodePudding user response：

Use css to set max-width or min-width on desired column so that it does not grow or shrink. You will need to calculate size.

You can use css to set globally. Or include the default icon at display. When you change the icon spacing should already be set. In your css file

table th, table td { min-width: 80px; max-width:100px;}