CODEWITHSUNDEEP
htmlcsshtml-table
user6751084
user6751084

Reputation:

Table: Extra text in new line

I have an image.

extra text in new

Now, What my doubt is, I want the text below image to be in new line if text is too long. When I enter long text then the cell(td) is enlarged which I don't want to be.

So I want the extra text to be in new line. It should be limited to the width of image, after that extra text should be in new line.

I can't use div and position property. I have to use table tag only.

Image height should be same. I have tried using word-wrap , white-space, but image height gets differ for that.

<table bgcolor="black" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; border: thin white solid; " align="left" border="0" cellpadding="0" cellspacing="0"  >
                                                <tbody>

                                                <td align="center">
                                                    <table  style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
                                                        <tbody><tr>
                                                            <td align="center" height="100" valign="top" width="100">
                                                                <p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="110" width="110" ></a></p>
                                                            </td>
                                                        </tr>
                                                        </tbody></table>
                                                </td>


                                                <tr>
                                                    <td class="h2" style=" font-weight: bold ;font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 10px;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
                                                       <p style="padding:0; margin:0;text-align: center;"> <span class="wrap_textbox">dsdsfsdfsdsfsdsdgsgdsdfsdfd</span></p>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="h2" style="font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 8px;text-align: center;color: #ffffff;">
                                                        <span class="wrap_textbox">Co-Founder at SeeFund</span>
                                                    </td>
                                                </tr>

                                                </tbody>

                                            </table>


                                            <!--Speaker 2-->

                                            <table  style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px;  " align="left" border="0" cellpadding="0" cellspacing="0" >
                                                <tbody>
                                                <tr>
                                                    <td align="center">
                                                        <table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
                                                            <tbody><tr>
                                                                <td align="center" height="100" valign="top" width="100">
                                                                    <p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" border="0" height="110" width="110" ></a></p>
                                                                </td>
                                                            </tr>
                                                            </tbody></table>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="h2" style=" font-weight: bold ;font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 10px;padding-top: 5px;padding-bottom: 0px;text-align: center;color:#ffffff; ">
                                                        <span class="wrap_textbox">Mr. R Chandrasekhar</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="h2" style="font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 8px;text-align: center;color: #ffffff;">
                                                        <span class="wrap_textbox">President of NASSCOM</span>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>



                                            <!--Speaker 3 -->

                                            <table  style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto;  margin-left: 15px;  " align="left" border="0" cellpadding="0" cellspacing="0" >
                                                <tbody>
                                                <tr>
                                                    <td align="center">
                                                        <table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
                                                            <tbody><tr>
                                                                <td align="center" height="100" valign="top" width="100">
                                                                    <p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455627060.jpeg" border="0" height="110" width="110" ></a></p>
                                                                </td>
                                                            </tr>
                                                            </tbody></table>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="h2" style=" font-weight: bold ;font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 10px;padding-top: 5px;padding-bottom: 0px;text-align: center;color:#ffffff;">
                                                        <span class="wrap_textbox">Mr. Jay Panda</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="h2" style="font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 8px;text-align: center;color: #ffffff;">
                                                        <span class="wrap_textbox">Member of Parliament</span>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>


                                            <!--Speaker 4 -->


                                            <table  style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto;  margin-left: 15px;  " align="left" border="0" cellpadding="0" cellspacing="0" >
                                                <tbody>
                                                <tr>
                                                    <td align="center">
                                                        <table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
                                                            <tbody><tr>
                                                                <td align="center" height="100" valign="top" width="100">
                                                                    <p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style="border: 3px solid #ffcbbc; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="110" width="110" ></a></p>
                                                                </td>
                                                            </tr>
                                                            </tbody></table>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="h2" style=" font-weight: bold ;font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 10px;padding-top: 5px;padding-bottom: 0px;text-align: center;color:#ffffff;">
                                                        <span class="wrap_textbox">Ms. Shazia Ilmi</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="h2" style="font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 8px;text-align: center;color: #ffffff;">
                                                        <span class="wrap_textbox">Spokesperson at BJP</span>
                                                    </td>
                                               </tr>
                                    </table>

Upvotes: 0

Views: 69

Answers (1)

Option
Option

Reputation: 2645

So here's what i done...

<table bgcolor="black" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; border: thin white solid; " align="left" border="0" cellpadding="0" cellspacing="0"  >
    <tbody>

    <td align="center">
        <table  style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
            <tbody><tr>
                <td align="center" height="100" valign="top" width="100">
                    <p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="110" width="110" ></a></p>
                </td>
            </tr>
            </tbody></table>
    </td>


    <tr>
        <td class="h2" style=" font-weight: bold ;font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 10px;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
            <p style="padding:0; margin:0;text-align: center; max-width:116px;"> <span class="wrap_textbox">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A consequuntur corporis, debitis dignissimos error fuga id inventore laudantium officiis quae quam, quia quos, repudiandae saepe sed sint tenetur? Doloribus, recusandae?</span></p>
        </td>
    </tr>
    <tr>
        <td class="h2" style="font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 8px;text-align: center;color: #ffffff;">
            <span class="wrap_textbox">Co-Founder at SeeFund</span>
        </td>
    </tr>

    </tbody>

</table>

Just add: max-width:116px; (or whatever you're happy with as a maximum width) and then it'll move its self on to a new line for you.

UPDATED

This is the line I added the styling to:

       <p style="padding:0; margin:0;text-align: center; max-width:116px;">

I'd highly advise putting these into CSS classes though and then into a stylesheet because if you ever wish to adjust the code in future you'll have to go into each file and adjust the style="" tag under each tag you've added it to.

Upvotes: 1

Related Questions