Making a table structure without using the <table> tag?

Question

I'm trying to do is something like this:

That's one row of a <table>. In other words, it's a <tr> which contains three <td>s. Now I want to make the same structure without using <table> tag (also without using <ul> <li> tag).

I want to do that by using <div>s. Is it possible?

This is my code:

---

<div class="share_edit_flag">
  <span>share</span>
  <span>share</span>
  <span>share</span>
</div>

<div class="editor">
  <a href="#">edited May 21 16 at 11:58</a>
  <div class="profile">
    <img src="#" />
    <a href="#">Rory O'Kane</a>
    <b>12.6k</b>
    <!-- I don't have any badge in my website -->
  </div>
</div>

<div class="author">
  <a href="#">asked May 21 16 at 11:51</a>
  <div class="profile">
    <img src="#" />
    <a href="#">vasanthkumarmani</a>
    <b>1</b>
    <!-- I don't have any badge in my website -->
  </div>
</div>

As you see, the result of my code doesn't look like the image which is in the top of my question.

As far as I know, I need to set float, display properties to them. I've tested them, but without achieving the expected result.

Answer 1

You can use the display:table and display:table-cell properties.

table - Let the element behave like a <table> element

table-cell - Let the element behave like a <td> element

Since you only need one row, you can skip the table-row (<tr>) element if you want. More info about the display property here.

Flexbox is also a good solution, unless you want support for older browsers and IE.

Example:

.table {
  display: table;
  width: 100%; //if you want the table to extend the full width of the parent
}

.table > div {
  display: table-cell;
  border: 1px solid red; //added this for highlight
}

<div class="table">
  <div class="share_edit_flag">
    <span>share</span>
    <span>share</span>
    <span>share</span>
  </div>

  <div class="editor">
    <a href="#">edited May 21 16 at 11:58</a>
    <div class="profile">
      <img src="#" />
      <a href="#">Rory O'Kane</a>
      <b>12.6k</b>
      <!-- I don't have any badge in my website -->
    </div>
  </div>

  <div class="author">
    <a href="#">asked May 21 16 at 11:51</a>
    <div class="profile">
      <img src="#" />
      <a href="#">vasanthkumarmani</a>
      <b>1</b>
      <!-- I don't have any badge in my website -->
    </div>
  </div>
</div>