Sentence Wrap inside a HTML table cell-CodePudding

I have the below HTML code, where i need to wrap the sentence inside the cell, as the sentence is overlapping to the next cells. how to use a wrap function ? I need to keep the below code intact and put the extra function of wrapping.

 <table width="100%">
        <table-body border = "1px solid black">
            <table-row border = "1px solid black" font-size="10px" background-color="#00a7d4" text-align="center" color="white">

<table-cell border = "1px solid black" number-columns-spanned="3"  padding="3px">
                    
                        <block><apex:outputText >{!QL.SBQQ__Product__r.Short_Description_Slides_Appliances__c}
                            </apex:outputText></block></table-cell>

            </table-row>
            
        </table-body>
    </table>

CodePudding user response：

Use W3Schools if you don't know html.

We use the table tag then either tr or td

like this:

<table>
    <tr>
        <th>TH</th>
    </tr>
    <tr>
        <td>TD</td>
    </tr>
</table>

CodePudding user response：

You can try with word-wrap: break-word if you want to wrap the cell to match the content. Otherwise you can try to use overflow:scroll to make it scrollable.

td {
    max-width: 100px;
    word-wrap: break-word;
}

  <table border = "1">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2dsadasdasdasdasdasdasda</td>
         </tr>
      </table>