CODEWITHSUNDEEP
htmlcsscss-tables
rishat
rishat

Reputation: 8376

Wrap a group of CSS table cells to a new line

I'm experimenting with CSS properties of a two-level set of DOM elements to make it appear like it's a table. The topmost element is just one, it wraps its children, which, in turn, form a flat list of lookalike elements. Like this:

<div class="t">
  <div class="c">First row</div>
  <div class="c">2</div>
  <div class="c">3</div>
  <div class="c">4</div>
  <div class="c">5</div>
  <div class="c">Second row</div>
  <div class="c">7</div>
  <div class="c">8</div>
  <div class="c">9</div>
  <div class="c">0</div>
</div>

I'm trying to make this list form two rows, each containing 5 elements. So the CSS I'm using is like:

.t {
  display: table;
  width: 100%;
}
.c {
  display: table-cell;
}
.c:nth-child(5n + 1):after {
  content: '-';
  display: table-row;
}

Which isn't working.

Is there a way to keep two levels of nesting and still have a list that appears as if it was a table?

Upvotes: 2

Views: 3143

Answers (3)

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve your expected result, I have used position:relative option and display:table-cell

HTML:

<div class="t">
  <div class="c">First row</div>
  <div class="c">2</div>
  <div class="c">3</div>
  <div class="c">4</div>
  <div class="c">5</div>
  <div class="c">Second row</div>
  <div class="c">7</div>
  <div class="c">8</div>
  <div class="c">9</div>
  <div class="c">0</div>
</div>

CSS:

.t {
  display: table;
  width: 100%;
}

.c {
  display: table-cell;
  padding: 1%;
  border: 1px solid black;
  text-align: center;
  width: 10%;
}

.c:nth-child(n+6) {
  display: table-cell;
  position: relative;
  left: -50%;
  top: 60px;
}

Codepen-http://codepen.io/nagasai/pen/mEOjLL

Upvotes: 0

Asons
Asons

Reputation: 87303

Based on what/how you want them to behave, you can use float, (haven't tested for cross browser support on this one though) but they will not behave as a normal table.

Another option is to use flexbox (will still not behave as a normal table though)

.t {
  display: table;
  width: 100%;
}
.c {
  display: table-cell;
  float: left;
  width: 20%;
}
<div class="t">
  <div class="c">First row</div>
  <div class="c">2</div>
  <div class="c">3</div>
  <div class="c">4</div>
  <div class="c">5</div>
  <div class="c">Second row</div>
  <div class="c">7</div>
  <div class="c">8</div>
  <div class="c">9</div>
  <div class="c">0</div>
</div>

Upvotes: 0

Stickers
Stickers

Reputation: 78786

If you can edit the HTML, just make the structure to like a complete table.

.t {
  display: table;
  width: 100%;
}
.r {
  display: table-row;
}
.c {
  display: table-cell;
}
<div class="t">
  <div class="r">
    <div class="c">First row</div>
    <div class="c">2</div>
    <div class="c">3</div>
    <div class="c">4</div>
    <div class="c">5</div>
  </div>
  <div class="r">
    <div class="c">Second row</div>
    <div class="c">7</div>
    <div class="c">8</div>
    <div class="c">9</div>
    <div class="c">0</div>
  </div>
</div>

Upvotes: 2

Related Questions