Is there a way to make inline-block elements behave like table cells?

Question

I am trying to mimic an HTML table with css classes, but the last "cell" element always gets pushed to the next line.

The way I am currently getting around this is to decrease the width of the last element by a few percent, so that the total width of the elements adds up to ~ 97%. This protects the last element from being pushed to the next line, but it doesn't look as nice because there's unused space at the end.

Is there a way to get the table cells to line up nicely and use 100% of the containing width?

.cell {
  display: inline-block;
}

<div class="table" style="width: 100%">
  <div class="row" style="width: 100%">
    <div class="cell" style="width:40%">Last Name</div>
    <div class="cell" style="width:40%">First Name</div>
    <div class="cell" style="width:20%">Age</div>
  </div>
</div>

You should be emulating the table structure using `table` styles in the same way that would be applied to a typical html `table` structure; so the containing parent element with the class `.table` should be `display: table`, the containing element with the class `.row` should be `display: table-row`, the nested children elements with the class `.cell` should be `display: table-cell`, etc. Although, if you need a table structure, why aren't you just using `table` to begin with? — UncaughtTypeError, Nov 14 '17 at 08:07
In this context, a "row" is a really a header that can be expanded to display more details about that particular item. So it isn't a traditional tabular data presentation. Otherwise, what you suggest would work perfectly. — Kaeleigh, Nov 14 '17 at 09:16

kyun · Answer 1 · 2017-11-14T08:12:11.937

I hvae 2 solutions.

The first solution is that

.row{
  font-size: 0;
}

.cell {
  display: inline-block;
  font-size: 14px;
}

<div class="table" style="width: 100%">
  <div class="row" style="width: 100%">
    <div class="cell" style="width:40%">Last Name</div>
    <div class="cell" style="width:40%">First Name</div>
    <div class="cell" style="width:20%">Age</div>
  </div>
</div>

Just set font-size:0 at parent div.

But I don't like this solution.

The second solution is that

.row{
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
}
.cell {
  /* display: inline-block; It's not require */
  font-size: 14px;
}

<div class="table" style="width: 100%">
    <div class="row" style="width: 100%">
        <div class="cell" style="width:40%">Last Name</div>
        <div class="cell" style="width:40%">First Name</div>
        <div class="cell" style="width:20%">Age</div>
    </div>
</div>

I recommend you display:flex.

If you want to learn about flex, you can find it in Google easily.

@eramit2010 I think it's not important thing. I just give way to solve. — kyun, Nov 14 '17 at 08:11

score 1 · Accepted Answer · answered Nov 14 '17 at 08:19

This is a well known "problem" with display:inline-block;

One solution is to comment the "space" between your divs. Other solutions exist, you should have a look at this question: How to remove the space between inline-block elements?

.cell {
  display: inline-block;
}

<div class="table" style="width: 100%">
  <div class="row" style="width: 100%">
    <div class="cell" style="width:40%">Last Name</div><!--
    --><div class="cell" style="width:40%">First Name</div><!--
    --><div class="cell" style="width:20%">Age</div>
  </div>
</div>

score -1 · Answer 3 · answered Nov 14 '17 at 08:16

-1

Whilst I applaud you for using semantically correct markup, if you are displaying tabular type data, then this should be using a table.

answered Nov 14 '17 at 08:16

neophytte

648
2
11
25

Is there a way to make inline-block elements behave like table cells?

3 Answers3