How to avoid unnecessary br tags when using table tag in nl2br?

Question

I have a variable text that sometimes contains plain text or sometimes codes and sometimes tables.

I want to minimize the HTML tags in the database, so I didn't use pre tag in table and text and used only in the codes (space preservation is not required in other two cases).

Now I'm stuck in a problem where I have tables as my data which is passing through nl2br that causing the following output in my source codes.

<table><br />
    <thead><br />
        <tr><br />
            <th>Operator</th><br />
            <th>Left</th><br />
            <th>Right</th><br />
            <th>Remark</th><br />
        </tr><br />
    </thead><br />
    <tbody><br />
        <tr><br />
            <td>/</td><br />
            <td>10</td><br />
            <td>5 or 5 / 2 / 1</td><br />
            <td>Left operand is unambiguous, right is not</td><br />
        </tr><br />
        <tr><br />
            <td>/</td><br />
            <td>5 or 10 / 5</td><br />
            <td>2 or 2 / 1<td><br />
            <td>Both left and right are ambiguous</td><br />
        </tr><br />
        <tr><br />
            <td>/</td><br />
            <td>2 or 10 / 5 / 2</td><br />
            <td>1</td><br />
            <td>Right operand is unambiguous and left is not</td><br />
        </tr><br />
    </tbody><br />
</table><br />

But in chrome developer's tools, it is showing something different than this.

</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br>
<table class="rembr">
    <thead>
        <tr>
            <th>Operator</th>
            <th>Left</th>
            <th>Right</th>
            <th>Remark</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>/</td>
            <td>10</td>
            <td>5 or 5 / 2 / 1</td>
            <td>Left operand is unambiguous, right is not</td>
        </tr>
        <tr>
            <td>/</td>
            <td>5 or 10 / 5</td>
            <td>2 or 2 / 1</td><td>
            </td><td>Both left and right are ambiguous</td>
        </tr>
        <tr>
            <td>/</td>
            <td>2 or 10 / 5 / 2</td>
            <td>1</td>
            <td>Right operand is unambiguous and left is not</td>
        </tr>
    </tbody>
</table><br>

I did not understand this behavior why different outputs for the same page.

Well, for now, I want to know how can I use table tag in nl2br without having the br after every table tag?

Answer 1

After googling days, I found a perfect solution for this. pre-wrap.

It will preserve white-spaces and new lines but wrap the word when overflow the text.

So,

div{
    white-space: pre-wrap;
}