How to Make 4 cells in each line by only css & html

Question

What I want to inquire about him, how to make 4 cells in each line automatically without the use of programming languages such as php . In other words, I want the line is not likely more than 4 cells and any new cell to be in a new line automatically, without manually to put in the code <tr>

If you want four cells per row *put four cells (``) in the row (``)*. Where are you stuck? — David Thomas, Jun 15 '14 at 01:40
Well, this can't be done with [tag:css], or without a programming language. So which constraint are you prepared to give up? — David Thomas, Jun 15 '14 at 01:59
i have a Variable is repeated , I want to come every one of them in a cell, and the 4 cells are in a single line only , can not use `width` or any thing to do that without `php` — o6 qr, Jun 15 '14 at 02:03

score 0 · Answer 1 · answered Jun 15 '14 at 01:54

0

<table>
 <tr>
  <td> Cell 1 </td>
  <td> Cell 2 </td>
  <td> Cell 3 </td>
  <td> Cell 4 </td>
 </tr>
</table>

This is the HTML

answered Jun 15 '14 at 01:54

Sam Creamer

5,187
13
34
49

yeah i know it already, but when i own 10 cells i want them Automatically split into 4 cells in each line , how ? – o6 qr Jun 15 '14 at 01:57
AH okay I see, this cannot be done with pure HTML and CSS as far as I know. Will require a bit of javascript – Sam Creamer Jun 15 '14 at 01:58
IE there is no attribute called `maximum_cells` or anything – Sam Creamer Jun 15 '14 at 01:58
well , i don't know much about java :( – o6 qr Jun 15 '14 at 01:59
yeah i mean java-script – o6 qr Jun 15 '14 at 02:56

Danield · Accepted Answer · 2014-06-15T15:31:01.003

Assuming you have a table markup like so:

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td>Cell 5</td>
        <td>Cell 6</td>
        <td>Cell 7</td>
        <td>Cell 8</td>
        <td>Cell 9</td>
        <td>Cell 10</td>
    </tr>
</table>

...You can cause each row to have 4 cells with the following css:

FIDDLE

CSS

td {
    float: left;
}
td:nth-child(4n + 5) {
    clear:left;
}

Edit:

If you want the each td to take up 25% of the table width, then you'll need you set a width on your table and then set width: 25% on all td elements (also reset defalt margin/paddings to 0)

Like so:

Updated FIDDLE

body, td {
    margin: 0;padding:0;
}
table {
    width: 100%;
}
td {
    float: left;
    width: 25%;
}

Question, what if I want to give every `` width `25%` ?! – o6 qr Jun 15 '14 at 13:07 — o6 qr, Jun 15 '14 at 13:07

score 0 · Answer 3 · edited May 23 '17 at 11:49

Let's assume you want to create a layout for a page and you use <tr> as a synonym for line/row of blocks, not for creating layout tables made of table, tr and td (that's a bad practice) or worse here for data table (a data table with 4 cells per row also have 4 header cells th in the first row (in general) and do use tr to semantically indicate where the rows are and how much cells they each contain)

That said, you can use sibling elements in your HTML code and float them. Here's a Fiddle

Relevant code:

HTML

<div class="block">Some content 1</div>
<div class="block">Some content 2</div>
<!-- (...) -->

CSS

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
body {
    width: 400px;
}
.block {
    float: left;
    width: 24%;
    margin: 0 1% 1% 0;
    padding: 4px;
    border: 1px solid #aaa;
}

/* Improvements for last "row" http://slides.com/heydon/effortless-style#/45 and next slides */
.block:nth-child(4n+1):last-child {
    width: 99%;
}
.block:nth-child(4n+1):nth-last-child(2),
.block:nth-child(4n+2):last-child {
    width: 49%;
}
.block:nth-child(4n+1):nth-last-child(3),
.block:nth-child(4n+2):nth-last-child(2),
.block:nth-child(4n+3):last-child {
    width: 32%;
}

thnx for your work , i found simple code and working as i want — o6 qr, Jun 15 '14 at 13:04

How to Make 4 cells in each line by only css & html

3 Answers3

CSS