<h1 id="heading-how-to-wrap-content-in-the-td-for-a-table">📑 how to wrap content in the td for a table</h1>
<ul>
<li><strong>🏷️Tags</strong> : #17-05-2022,  #pending #completed #permanent</li>
</ul>
<h4 id="heading-links">🔗 Links</h4>
<p><a target="_blank" href="https://stackoverflow.com/questions/6666532/how-to-force-table-cell-td-content-to-wrap">stackoverflow</a></p>
<h2 id="heading-problem">Problem</h2>
<ol>
<li>content in the table , is much so because of that the table is becoming wide and there is a scrollbar at the bottom</li>
</ol>
<h2 id="heading-solution">Solution</h2>
<ol>
<li>we have to wrap the content of the td</li>
</ol>
<pre><code class="lang-CSS">

 <span class="hljs-selector-tag">td</span> {

    <span class="hljs-comment">/* css-3 */</span>
    <span class="hljs-attribute">white-space</span>: -o-pre-wrap; 
    <span class="hljs-attribute">word-wrap</span>: break-word;       <span class="hljs-comment">/* only this one change works for me  */</span>
    <span class="hljs-attribute">white-space</span>: pre-wrap; 
    <span class="hljs-attribute">white-space</span>: -moz-pre-wrap; 
    <span class="hljs-attribute">white-space</span>: -pre-wrap; 

}
</code></pre>
<ol>
<li>modify the table layout </li>
</ol>
<pre><code class="lang-CSS"><span class="hljs-selector-tag">table</span> { 
  <span class="hljs-attribute">table-layout</span>: fixed;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>
}
</code></pre>


# 📑 how to wrap content in the td for a table

- **🏷️Tags** : #17-05-2022,  #pending #completed #permanent

#### 🔗 Links
[stackoverflow](https://stackoverflow.com/questions/6666532/how-to-force-table-cell-td-content-to-wrap)

## Problem
1. content in the table , is much so because of that the table is becoming wide and there is a scrollbar at the bottom

## Solution
1. we have to wrap the content of the td


```CSS


 td {

    /* css-3 */
    white-space: -o-pre-wrap; 
    word-wrap: break-word;       /* only this one change works for me  */
    white-space: pre-wrap; 
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap; 

}


```


2. modify the table layout 

```CSS
table { 
  table-layout: fixed;
  width: 100%
}

```



CSS : how to wrap content in the td for a table

📑 how to wrap content in the td for a table

🔗 Links

Problem

Solution