1

I'm populating a large amount of text within td. I am trying to wrap the text with td if the text content takes up enough space, but the text keeps breaking out of the table.

td.noBorder {
    border: none;
}
.alignTable {
    border-collapse: collapse;
    background: #f4f4f4;
    padding-left: 10px;
    text-align: center;
    font: normal 13px Calibri;
    color: #5a5a5a;
}
table tr td {
    height: 30px;
    border: solid 1px #cbd0d2;
}

<div style="margin:0 auto;">
  <div style="width:730px; margin:0 auto;">
    <h1 style="height:20px;font:normal 18px Calibri;color:#010101;font-weight:600;border-collapse: collapse; margin-left:20px"> Related Links </h1>
    <div style="width:730px; margin:0 auto;">
      <h2 style="padding-left:23px;"> Header </h2>
      <table border="1" width="100%" cellpadding="0" cellspacing="0" class="alignTable" >
        <tr>
          <td class="noBorder" style="text-align: left;padding-left: 23px;"><!-- #06999c --> 
            <img src="images/arrow.png" width="5" height="10" alt="" /> <a style="padding-left: 8px;" href="{$hyperlink}" target="_blank"> LARGE TEXT </a></td>
          <td class="noBorder"/>
          <td class="noBorder"/>
        </tr>
      </table>
      </xsl:for-each>
    </div>
  </div>
</div>
TheAcolyte
  • 91
  • 9
user2998990
  • 970
  • 5
  • 18
  • 36

2 Answers2

3

Solution 1: Make It Scrollable

You can make the td automatically scrollable if the content exceeds its regular size by setting its overflow property to auto. If you expect that the td will usually overflow its boundaries, you could also pass overflow: scroll so that it always renders with a scrollbar. Check out the MDN article if you decide to go that route.

Solution 2: Flexbox

Within the td, you could add a div and give it display: flex. Doing this would allow you to apply styles solely to that div without breaking outside of the table. This goes against the cascading principle of CSS, but should be a convenient workaround if that's all you need.

If you're unfamiliar with flexbox styles, Chris Coyier does a good job of explaining them. Flexbox is supported by nearly all modern browsers, and can be coaxed to work with IE9 and 10 if you apply vendor prefixes.

Suggestion: Refactor Your Markup

Just so you're aware, using a table-based layout is no longer a recommended way to structure most websites. If it's at all possible to refactor this into div's, doing so will keep your stylesheets organized and manageable.

TheAcolyte
  • 91
  • 9
1

You have several possibilities, one to add vertical scroll if text exceeds the margin, one to adjust the font size to fit the text inside, you should see what fits best in your page. If you create a snippet here I can help you more precise!

smobx
  • 67
  • 9