-5

i have got an html table like that

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

the result will be

1 2 3 4

i want the result to be

1 2

3 4

but in run time using jquery

Any Ideas?

0

3 Answers 3

1

Using jQuery

HTML

<table id="table1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

jQuery

$("#table1 td:first-child").css("float", "left");
$("#table1 td:nth-child(2)").css("display", "block");
$("#table1 td:nth-child(3)").css("float", "left");
$("#table1 td:nth-child(4)").css("float", "left");

Using CSS

you can also do this using css without using jquery

HTML

<table id="table2">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

CSS

#table2 td
{
    float: left;
}
#table2 tr > td:first-child + td
{
    display: block;
    float: none;
}

example

1
  • +1 for showing a CSS way of doing it. With your jQuery though, I'd suggest selecting all td's and floating them left, and then filter the selection to :odd and clear left. You'll come to the same solution with less code and it's more useful to the OP because it could be used for 1-4 or 1-999 cells...
    – ahren
    Mar 16, 2013 at 13:33
0

Can restructure table by putting last 2 cells in new row:

$('tr').each(function(){
    $(this).after( $('<tr>').append( $(this).find('td:gt(1)')))
});

DEMO: http://jsfiddle.net/Fyvwd/

5
  • Thanks for your reply.. that's good in case of 4 cells but i have random number of cells may be greater than 4
    – Amroooo
    Mar 16, 2013 at 14:05
  • need more details then. My solution has nothng to do with quantity. What do you mean by random number of cells?
    – charlietfl
    Mar 16, 2013 at 14:07
  • works regardless of how many rows jsfiddle.net/Fyvwd/1
    – charlietfl
    Mar 16, 2013 at 14:12
  • this table is filled from database so the number of cells is not static may be 4 or 5 and may be more ... so i want it to be displayed in rows and each row is only 2 cells
    – Amroooo
    Mar 16, 2013 at 14:12
  • why didn't you explain that in question? Wastes people's time when you provide over simplified example and don't fully explain issue
    – charlietfl
    Mar 16, 2013 at 14:15
0
<table>
   <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
     <td>4</td>
   </tr>
</table>

It works but it's not quite right ))

$(document).ready(function(){
    $("td:even").css({"display":"block","float":"left", "clear":"left"});
    $("td:odd").css({"display":"block", "float":"left"});
});
6
  • almost, i've edited answer, it works correctly Mar 16, 2013 at 13:24
  • What's with the loop? All you're doing is processing td.length times more than you need to.
    – ahren
    Mar 16, 2013 at 13:28
  • yes, you're absolutely right, fixed Mar 16, 2013 at 13:31
  • i tried it but it doesn't work.
    – Amroooo
    Mar 16, 2013 at 13:34
  • i have an idea but i need to know how to implement it i want to add </tr><tr> at the end tag of the td any Ideas how to do that?
    – Amroooo
    Mar 16, 2013 at 13:35

Not the answer you're looking for? Browse other questions tagged or ask your own question.