CODEWITHSUNDEEP
htmlcsshtml-table
ReshaD
ReshaD

Reputation: 946

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>

Upvotes: 3

Views: 3282

Answers (5)

dippas
dippas

Reputation: 60543

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>

Upvotes: 3

Brijal Savaliya
Brijal Savaliya

Reputation: 1091

user "float: left" to put div on left and remove "margin-left" for secondOne and B 

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

  </tr>
</table>

Upvotes: 1

krishna
krishna

Reputation: 518

You  can use float property

below is the working fiddle

https://jsfiddle.net/w5zu09ny/1/

Upvotes: 1

joshnik
joshnik

Reputation: 482

Add this to the style part of your middle 3 divs:

float: left;

So it becomes:

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

Upvotes: 2

Pietro
Pietro

Reputation: 988

Try this

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

Upvotes: 0

Related Questions