HTML table within a table fit

Question

I am pretty new to html and css, and have been trying to upgrade a page for my company. I have managed to get a table within the table as I want it, except that I want the inner tables to expand to the size of the cell for the table they are in. Sorry I'm having a hard time wording what I mean.

    <table align = "center" cellpadding="4" border="2">

    <tr>
    <!-- BEGIN AutomaticDownloads -->
    <td>
        <table cellpadding="4" border="2">
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </td> 
    {tr}

    <!-- END AutomaticDownloads -->
    </tr>

    </table>

if this helps at all. I have tried a few things here and in CSS but I can't seem to get it to work

Nested tables? Are you using these for layout purposes, or is your data actually tabular data that belongs in a table? — Nick R, Jan 10 '14 at 17:17
Nested tables is almost certainly a sign of using tables for layout (which is a bad thing). see: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — cimmanon, Jan 10 '14 at 17:47
There is actually tabular data that belongs in the table. I needed 3 folders displayed on the left and their modified time on the right, and then again for a new set of folders and so on. — Tapialj, Jan 13 '14 at 19:53

score 1 · Answer 1 · answered Jan 10 '14 at 18:26

i think you are taking about that the size of inner tables depend on the size of outer table when outer table size changes then the size of inner also changes according to the size of outer one.

<table align="center" cellpadding="4" border="2" width="500" height="500">

    <tr>
    <td>


 <table cellpadding="4" border="2" width="100%" height="100%">
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</td> 

</tr>

</table>

score 0 · Answer 2 · answered Jan 10 '14 at 17:34

How about adding some sizes to your tables: http://jsfiddle.net/uu3AB/

<table align="center" cellpadding="4" border="2" width="400">

    <tr>
    <td>
        <table cellpadding="4" border="2" width="100%">
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </td> 

    </tr>

    </table>

score 0 · Answer 3 · answered Jan 10 '14 at 17:40

I think I've captured what you're asking for. I've set a width of 100% on all table elements so they will expand to fill their container, and added borders to each table so you can see them touching on all sides.

<table align="center" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <!-- BEGIN AutomaticDownloads -->
    <td>
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>a</td>
          <td>a</td>
        </tr>
        <tr>
          <td>b</td>
          <td>b</td>
        </tr>
        <tr>
          <td>c</td>
          <td>c</td>
        </tr>
      </table>
    </td> 
    <!-- END AutomaticDownloads -->
  </tr>
</table>

table {
  width: 100%;
  border: 1px solid #ccc;
}    
table table {
  border: 1px solid #f00;
}

HTML table within a table fit

3 Answers3