Search code examples
htmlcsshtml-table

Align <div>'s in <td> horizontally

I want to align three div's horizontally in a td.

I want also change div of A and B in the picture below:

enter image description here

It is just important that A goes left side of the SecondOne and B on the right of it. I used span as well but it didn't work.

jsFiddle

<table>
  <tr>
    <td>
      <div style="width: 55px; background: yellow; margin-left: 50px;">
        FirstOne
      </div>
    </td>

    <td>
      <div style="width: 11px; background: red; margin-left: 50px">
        A
      </div>
      <div style="width: 75px; background: green; margin-left: 50px;">
        SecondOne
      </div>
      <div style="width: 11px; background: red; margin-left: 50px">
        B
      </div>
    </td>
    <td>
      <div style="width: 65px; background: blue; margin-left: 50px;">
        ThirdOne
      </div>
    </td>

  </tr>
</table>

Solution

  • New Answer

    set display: flex in div parent

    .table-divs {
  border: 1px dashed red
}

.table-divs td:nth-of-type(2) {
  padding: 0 50px;
  display: flex;
}

.first {
  width: 55px;
  background: yellow;
}

.second {
  width: 75px;
  background: green;
}

.third {
  width: 65px;
  background: blue;
}

.a,
.b {
  width: 11px;
  background: red;
}
    <table class="table-divs">
  <tr>
    <td>
      <div class="first">
        FirstOne
      </div>
    </td>

    <td>
      <div class="a">
        A
      </div>
      <div class="second">
        SecondOne
      </div>
      <div class="b">
        B
      </div>
    </td>
    <td>
      <div class="third">
        ThirdOne
      </div>
    </td>

  </tr>
</table>
<hr />
<div class="a">
  A
</div>
<div class="second">
  SecondOne
</div>
<div class="b">
  B
</div>

<div class="third">
  ThirdOne
</div>

    Old Answer

    set display:inline:block to div

    Don't use inline styles.

    .table-divs {
  font-size: 0;
  /*fix inline-block gap*/
  border: 1px dashed red
}
.table-divs div {
  display: inline-block;
  font-size: 16px
  /* set font-size again */
}
.table-divs td:nth-of-type(2) {
  padding: 0 50px
}
.first {
  width: 55px;
  background: yellow;
}
.second {
  width: 75px;
  background: green;
}
.third {
  width: 65px;
  background: blue;
}
.a,
.b {
  width: 11px;
  background: red;
}
   
    <table class="table-divs">
  <tr>
    <td>
      <div class="first">
        FirstOne
      </div>
    </td>

    <td>
      <div class="a">
        A
      </div>
      <div class="second">
        SecondOne
      </div>
      <div class="b">
        B
      </div>
    </td>
    <td>
      <div class="third">
        ThirdOne
      </div>
    </td>

  </tr>
</table>
<hr />
<div class="a">
  A
</div>
<div class="second">
  SecondOne
</div>
<div class="b">
  B
</div>

<div class="third">
  ThirdOne
</div>