1

I'm trying to get the label (yellow box) to not to have extra space between the shape but having hard time doing it.

The closest solution I got here is that if I do .label{flex:0} removes the space but breaks the text into multiple lines instead of just 2 or 3 lines.

The goal here is to right align the second header cell in the meantime center align the label and the shape without having extra space between the label and shape.

Desired output;

enter image description here

Here is the snippet;

.square {
  width: 10px;
  min-width: 10px;
  min-height: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: red;
  display: inline-block;
}

.label {
  text-align: right;
  background-color: yellow;

}

.container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

table {
  width: 400px;
  background-color: gray;
  border-collapse: collapse;
}

table tr th:nth-child(1), table tr td:nth-child(1) {
  min-width: 140px;
  text-align: left;
  padding: 5px;
  vertical-align: center;
}

table tr td:nth-child(2),table tr th:nth-child(2) {
  text-align: right;
  width: 200px;
}
<table>
  <thead>
    <tr>
      <th class="header1">
        String header 1
      </th>
      <th class="header2">
        <div class="container">
          <span class="square"></span>
          <span class="label">Numeric cell w  with realy long long name</span>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>String cell</td>
      <td>15.0</td>
    </tr>
  </tbody>
</table>
Tan Kucukhas
  • 787
  • 3
  • 8
  • 26
  • 1
    Add `border-collapse: collapse;` to the table's css. – Rob Moll Aug 26 '21 at 17:41
  • 1
    If `border-collapse: collapse` solves your problem, please request to reopen the question. I am under the impression this is a wrapping problem. – Michael Benjamin Aug 26 '21 at 17:50
  • Thanks for the solution. border-collapse worked with the current code however i realized I also one more requirement the yellow table header has to have fix width and the collapse doesn't work when there is a fixed with on the header. I've updated my code accordingly. – Tan Kucukhas Aug 26 '21 at 18:00

0 Answers0