Can someone help me with my tabs in CSS ?

Hi there, I am trying to do something quite simple: I want 3 radio buttons which correpond to three tabs underneath it. Click on a button and the corresponding tab appears The following code work: <td style="vertical-align:top">                                <input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked" /><span title="Abilities">Abilities</span>                                <input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2" /><span title="Second Tab">Inventory</span>                                <input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3" /><span title="Third Tab">Spells</span>                                 <div class="sheet-tab-content sheet-tab1">                                     Lorem ipsum dolor sit amet                                 </div>                                 <div class="sheet-tab-content sheet-tab2">                                     consectetur adipisicing elit                                 </div>                                 <div class="sheet-tab-content sheet-tab3">                                     sed do eiusmod tempor incididunt ut                                  </div>        </td> with the following CSS txt: .sheet-tab-content { display: none; } input.sheet-tab1:checked ~ div.sheet-tab1, input.sheet-tab2:checked ~ div.sheet-tab2, input.sheet-tab3:checked ~ div.sheet-tab3, {     display: block; } So far so good but when I want to neatly put the buttons and the tabs in a table, it stops working: <td style="vertical-align:top">                     <table style="width:100%,">                         <tr>                             <td>                                <input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked" /><span title="Abilities">Abilities</span>                             </td>                             <td>                                <input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2" /><span title="Second Tab">Inventory</span>                             </td>                             <td>                                <input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3" /><span title="Third Tab">Spells</span>                             </td>                         </tr>                         <tr>                             <td colspan=3>                                 <div class="sheet-tab-content sheet-tab1">                                     Lorem ipsum dolor sit amet                                 </div>                                 <div class="sheet-tab-content sheet-tab2">                                     consectetur adipisicing elit                                 </div>                                 <div class="sheet-tab-content sheet-tab3">                                     sed do eiusmod tempor incididunt ut                                  </div>                                     </td>                         </tr>                     </table> </td> What am I doing wrong  and what do I need to modify ?

I'm not an expert, but I think the tabs only work when in the same div.  By putting radio buttons in one table and the tab pages in another table, you block one from talking to the other.

CPP is correct. The best approach would be to get them out of a table and use DIVs for your sheet structure.  If you're really attached to the table, you'll need to create checkboxes with the same name and values as the radio buttons and put them right above the tabs. Those checkboxes could be styled with a "display: none;" so they are invisible. Something like: <td colspan=3> <input type="checkbox" style="display: none;" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked" /> <input type="checkbox" style="display: none;" name="attr_tab" class="sheet-tab sheet-tab2" value="2" />> <input type="checkbox" style="display: none;" name="attr_tab" class="sheet-tab sheet-tab3" value="3" /> <div class="sheet-tab-content sheet-tab1"> Lorem ipsum dolor sit amet </div> <div class="sheet-tab-content sheet-tab2"> consectetur adipisicing elit </div> <div class="sheet-tab-content sheet-tab3"> sed do eiusmod tempor incididunt ut </div> </td> But I would get rid of the table if you can...DIVs are a lot more flexible and easier to style, etc.

Finderski said: CPP is correct. The best approach would be to get them out of a table and use DIVs for your sheet structure.  If you're really attached to the table, you'll need to create checkboxes with the same name and values as the radio buttons and put them right above the tabs. Those checkboxes could be styled with a "display: none;" so they are invisible. Alternatively, make those checkboxes type=hidden instead and use the [value=''] selector to specify them 

I have solved the problem by putting all the checkboxes and the tab content under the same div. It works.