Why do cells in tables shrink?

[JudeFord]

Hi, When I create a table, the cells look normal size. But when I hit save, all the cells that are empty shrink down to almost nothing. See image attached. It is very annoying, how do I stop this happening? I can't even get the cursor in there to fix them.

[Chris_Hofer]

Good morning, @JudeFord ...

I think you have actually answered your own question.  The reason why the cells below your top row shrink are because you do not have any content in them...and that the HTML for the table does not have anything specifying cell height.  I was able to replicate a table similar to yours:

The code for this table looks something like this:

<table style="border-collapse: collapse; width: 98.1002%;" border="1">
    <tbody>
        <tr>
            <td style="width: 33.3153%;">Column 1</td>
            <td style="width: 33.3153%;">Column 2</td>
            <td style="width: 33.3165%;">Column 3</td>
        </tr>
        <tr>
            <td style="width: 33.3153%;"></td>
            <td style="width: 33.3153%;"></td>
            <td style="width: 33.3165%;"></td>
        </tr>
        <tr>
            <td style="width: 33.3153%;"></td>
            <td style="width: 33.3153%;"></td>
            <td style="width: 33.3165%;"></td>
        </tr>
        <tr>
            <td style="width: 33.3153%;"></td>
            <td style="width: 33.3153%;"></td>
            <td style="width: 33.3165%;"></td>
        </tr>
    </tbody>
</table>

Now, if you wanted to add some height to your empty columns, you could do something like this?

<table style="border-collapse: collapse; width: 98.1002%; height: 82px;" border="1">
    <tbody>
        <tr style="height: 24px;">
            <td style="width: 33.3153%; height: 24px;">Column 1</td>
            <td style="width: 33.3153%; height: 24px;">Column 2</td>
            <td style="width: 33.3165%; height: 24px;">Column 3</td>
        </tr>
        <tr style="height: 29px;">
            <td style="width: 33.3153%; height: 29px;"></td>
            <td style="width: 33.3153%; height: 29px;"></td>
            <td style="width: 33.3165%; height: 29px;"></td>
        </tr>
        <tr style="height: 29px;">
            <td style="width: 33.3153%; height: 29px;"></td>
            <td style="width: 33.3153%; height: 29px;"></td>
            <td style="width: 33.3165%; height: 29px;"></td>
        </tr>
    </tbody>
</table>

The "px" is pixels ... but you could instead put a percentage here (similar to the width).  Of course, you can decide how tall you want each of these empty cells.  Here is a Guide on how you can access the HTML side of a content page in your course:

How do I use the HTML view in the Rich Content Edi... - Instructure Community (canvaslms.com)

Hope this will help a bit.  Sing out if you have any other questions about this...thanks!

[JudeFord]

Hi Chris,

Thanks for you suggestion, I have no idea how to code unfortunately. I know how to copy and paste your code into the HTML editor, but obviously that is just for that specific table. I normally just create a table using the table tool i.e 4 x 5 cells, then enter the text. I needed the cells to be blank as students would be filling them in with their answers. Its just so annoying I can't do that anymore. As soon as I hit save it reverts to that tiny cell table. I think I will just have to put a character in each cell and make the text white so it keeps the cells open?? Thanks again for you code, I used that in the meantime. Cheers Jude

[Chris_Hofer · Accepted solution]

Hi again, @JudeFord ...

I just realized I probably should have provided a simpler solution than looking at the HTML code.  Here is something else that you can do...similar to what you were suggesting in your latest reply.

1. Create your table in the RCE (Rich Content Editor)
2. Add text to your top row to label your columns.
3. In the cells where you will not have any text, just hit your space bar one time in each blank cell.
4. Save your page.

This will display your page with the cells looking nice.  Here's an example of what the code looks like...

<table style="border-collapse: collapse; width: 98.1002%;" border="1">
    <tbody>
        <tr>
            <td style="width: 33.3153%;">Column 1</td>
            <td style="width: 33.3153%;">Column 2</td>
            <td style="width: 33.3165%;">Column 3</td>
        </tr>
        <tr>
            <td style="width: 33.3153%;">&nbsp;</td>
            <td style="width: 33.3153%;">&nbsp;</td>
            <td style="width: 33.3165%;">&nbsp;</td>
        </tr>
        <tr>
            <td style="width: 33.3153%;">&nbsp;</td>
            <td style="width: 33.3153%;">&nbsp;</td>
            <td style="width: 33.3165%;">&nbsp;</td>
        </tr>
    </tbody>
</table>

The   is a non-breaking space (the spacebar) in HTML.

Hope this helps a bit!