通过忽略绝对定位的元素使文本居中对齐

Question

I am developing a flex table from scratch and the table supports filtering and sorting. The icons for filters and sorting are displayed in the table header (right corner). Also my table supports that the user can position the header text left/center;

My problem:

Since the icons are inside the table header, icons as well occupies some space. So when i position the elements in the center, i see the alignment gets disturbed as shown below.

 body { width: 100%; }.table-header, .table-body { display: flex; width: fit-content; border: 1px solid black; padding: 10px; }.header, .data { display: flex; min-width: 150px; width: 150px; border-right: 1px solid black; display: flex; justify-content: center; position: relative; }.header.text { width: 100%; white-space: nowrap; text-align: center; overflow: hidden; text-overflow: ellipsis; }.icons { float: right; right: 0; display: flex; }

 <div class="table"> <div class="table-header"> <div class="header"> <div class="text">Hlkjklkjlkjlkj lkjlkjlkjlkjlkjljlkjlkj</div> <div class="icons"> <span> &#9760</span> <span> &#9760</span> </div> </div> <div class="header">9747 <div class="text">Header 2</div> <div class="icons"> <span>b</span> <span>b</span> </div> </div> <div class="header"> <div class="text">Header 3</div> <div class="icons"> <span>a</span> <span>b</span> </div> </div> <div class="header"> <div class="text">Header 4</div> <div class="icons"> <span>a</span> <span>b</span> </div> </div> </div> <div class="table-body"> <div class="data">123</div> <div class="data">123</div> <div class="data">123</div> <div class="data">123</div> </div> <div class="table-body"> <div class="data">123</div> <div class="data">123</div> <div class="data">123</div> <div class="data">123</div> </div><div class="table-body"> <div class="data">123</div> <div class="data">123</div> <div class="data">123</div> <div class="data">123</div> </div> </div>

Code: Here

What i tried

So since the icons as well take some space, to avoid this i positioned them absolutely relative to the header. So the alignment problem got solved. But for long headers where ellipsis has to be shown, the ellipsis hides behind the icons as shown below

Code: Here

So what is the solution to this? I want to maintain the center position by reducing the space occupied by the icons. Is it possible through CSS? Please help. Thanks:)

Answer 1

If you try to do that with absolute positioning you need to know what exact width your icons can take.

Then possible solution is to add padding rule (left/right) into table headers, so CSS code should be like this:

body {
  width: 100%;
}

.table-header, .table-body {
  display:  flex;
  width: fit-content;
  border: 1px solid black;
  padding: 10px;
}

.header, .data {
  box-sizing: border-box; 
  padding: 0 30px;
  display: flex;
  min-width: 150px;
  width: 150px;
  border-right:  1px solid black;
  display: flex;
  justify-content: center;
  position: relative;
}

.header .text {
  width: 100%;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icons {
  position: absolute;
  right: 0;
}