Search code examples
htmlcss-tables

I can’t get a line to break in a table


I've been trying to get a line break in this HTML code, but no matter what I do it will not break.

<table>
    <tbody>
        <tr>
            <th>Accusative</th>
            <td>
                <p>
                    do nothing for inanimate, genitive rule for animate 
                </p>
            </td>
        </tr>
    </tbody>
</table>
Column 1 Column 2
Accusative do nothing for inanimate, genitive rule for animate

This is what I get when I run the code above. But this looks ugly in context, so I want it to have brakes in it.

This is what I mean when I say brakes.

do nothing for inanimate,
genitive rule
for animate


I've tried putting
where I want the lines to brake, but nothing changes. I've also tried putting each into different paragraph tags. But the padding makes it too spaced out.


Solution

  • Use HTML <br /> element(s) on the place(s) where you want line breaks.

    for example:

    Textte<br />xttext
    will result in:

    Textte
    xttext

    Note: you may also use <br> instead of <br />.

    Applied to your code:

    <table>
        <tbody>
            <tr>
                <th>Accusative</th>
                <td>
                    <p>
                        do nothing for inanimate,<br />
                        genitive rule for animate 
                    </p>
                </td>
            </tr>
        </tbody>
    </table>
    
    

    It doesn't matter if you put a new-line after <br /> or not.

    See also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br