Search code examples
htmlcssodooqweb

HTML : How to force words separte with white space to break line if it's not fit in the cell?

I'm doing some dynamic table in Odoo Qweb.
I make the table to has table-layout: fixed; border-collapse: collapse and width: 100%;
I wonder why the "4 Colin Desmarets" doen't break like the "3 Colin Company"?
I have tried a lot of css style avaible but can't get the result I want in pdf and html format.
enter image description here

Here is my scss :

.table-main-report-dn {
width: 100%;
border-collapse: collapse;
table-layout: fixed;

tr, td {
    border: 1px solid black;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

td {
    padding: 4px;
}

td.name {
    width: 17%;
}

td.name-intra {
    width: 35%;
}

td.company {
    width: 33%;
}

td.birthday {
    height: 20%;
}

td.title {
    height: 44px;
    background-color: #EDEEE1;
}

td.text-title {
    vertical-align: baseline;
    text-align: center;
}

tr.main {
    td {
        height: 65px;
    }
}

td.main-info {
    height: 150px !important;
}

}

And here is my xml code :

<tr t-foreach="o.participant_ids" t-as="participant" class="main">
                        <td>
                            <b><t t-esc="count"/>&#160;<t t-esc="participant.lastname"/>&#160;<t t-esc="participant.firstname"/>
                            </b>
                        </td>
                        <td>
                            <t t-esc="participant.parent_id.name"/>
                        </td>
                        <td>
                            <t t-if="participant.birth" t-esc="participant.birth.strftime('%d/%m/%Y')"/>
                        </td>
                        <t t-foreach="range(o.session_id.seance_count)" t-as="d">
                            <td></td>
                        </t>
                        <t t-set="count" t-value="count+1"/>
                    </tr>

Can you help me?

Solution

  • What about avoiding non breaking spaces (&#160;)?

    <t t-esc="count + ' ' + participant.lastname + ' ' + participant.firstname"/>