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


Tags: html,css

Problem :

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?



Solution :

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


    CSS Howto..

    How to change the label color by its id with css?

    How can I change css for every DOM object in the page in SAPUI5

    How To Apply CSS rule to Classes with Specific Keywords Inside Them?

    How can add atribute to css of page on page load event

    How to get css class name using Selenium?

    how to set a specific pixel or character width limit for a text in css

    How can
    /
    /
    's with 100% width, yet discrepancies in mobile browsers, be combatted?

    How to make my CSS transition smoother/work on different browsers?

    How to make the logo drop a bit in the nav menu and other suggestions

    How can I add CSS animation to an element on a web page? [closed]

    How to write css for alt attribute of img tag (word-break: break-all property doesn't work in IE)

    How to wrap the center content and make it take the remaining width of the div

    How to Hide a Textbox with only CSS

    How to CSS style a radius border

    HTML/CSS | How to place different elements in a header div to different positions?

    How do you set the background color for a variable height page?

    How can I create a status bar with bootstrap?

    How to make the long text to fit inside a small div?

    How to construct CSS selector targeting attribute with value containing an ASCII line feed?

    How to center a IMG tag horizontaly and vertically using html and css in ie7?

    ASP.NET Gridview - How do I change the color properties vertically?

    How do front end devs bundle and minify files?

    How to make certain text not selectable with CSS [duplicate]

    How to make fixed navbar top like w3school

    How to not inherit CSS styles from parents? [duplicate]

    how to center UL in my page?

    How do I make entire div a link? [duplicate]

    How to make a webpage mobile friendly with css media queries

    How to horizontally and vertically center two images on top of each other?

    How can I skin / theme a windows forms application [closed]