CODEWITHSUNDEEP
htmlcss
Junior Dev
Junior Dev

Reputation: 114

How do I limit the number of cells on a row in CSS

I'm editing my forum for mobile devices. So, I'm using media queries to format the front page based on device width.

My issue is that all of the categories have this style, which puts the td elements all in a row.

<tr class="windowbg2">
                <td class="icon windowbg">
                </td>
                <td class="info">
                </td>
                <td class="stats windowbg">
                </td>
                <td class="lastpost">
                </td>
            </tr>

I don't want to get into the PHP that creates the rows, and my attempts/searches so far haven't worked how I want.

I want have the icon td and the info td squished onto one row, and under it have the stats and lastpost tds. How would I separate this row into two using CSS alone?

Upvotes: 1

Views: 441

Answers (2)

trs
trs

Reputation: 863

HTML

<table>
  <tr class="windowbg2">
    <td class="icon_windowbg">
      icon windowbg
    </td>
    <td class="info">
      info
    </td>
    <td class="stats_windowbg">
      stats windowbg
    </td>
    <td class="lastpost">
      lastpost
    </td>
  </tr>
</table>

CSS

table ,td {
  border: 1px solid #000;
}
table {
  width: 100%;
}
td {
  width: 49%;
  float: left;
  display: block;
}

The border on the table is just so you can see it. You can take that off.

DEMO

http://codepen.io/anon/pen/xbdjoW?editors=110

Upvotes: 2

Todd Matthews
Todd Matthews

Reputation: 291

You'll want to use a grid framework like Twitter's bootstrap or Thoughtbots "Bourbon neat". These allow you to specify how large an area will be with a main container. Then how much an each element will take up in that container.

with bourbon neat you could use

tr {
   display:block # you're probably better off using div's though
   @include outer-container;
 }

 ele {
    @include span-columns(6);
 }

this would effectivily in a 12 column grid put the two side by side in a row if your elements were

<tr>
  <td class="ele"></td>
  <td class="ele"></td>
</tr>

you can use this logic to make the other ones span the full 12 columns in the next row.

of course this can all be done in regular css with max-widths and more. grids just have done alot of the work for you. bootstrap is even easier to use. i just prefer bourbons more hands-off approach.

Upvotes: 0

Related Questions