[![enter image description here](https://i.stack.imgur.com/q1UeU.png)](https://i.stack.imgur.com/q1UeU.png)
I have a table with a lot of columns that contain text, image and text. I used some CSS to make the images resize the same way. Now when I resize the browser the text breaks in multiple lines. I would like for it to happen to all the text at the same point/time but I have no idea how to do this.

Full HTML & CSS code, with working example on JSFiddle: <http://jsfiddle.net/zmyfjrdv/14/>

Relevant part of the HTML code:

```
  <tr id="geqtablefaderrow" class="geqtablerow">
    <td class="geq">100 Hz <br><img class="geqfaderimage" data-frequency="100" src="https://i.imgur.com/ImkN7ng.png"><br>100 Hz</td>
    <td class="geq">200 Hz <br><img class="geqfaderimage" data-frequency="200" src="https://i.imgur.com/ImkN7ng.png"><br>200 Hz</td>
    <td class="geq">400 Hz <br><img class="geqfaderimage" data-frequency="400" src="https://i.imgur.com/ImkN7ng.png"><br>400 Hz</td>
    <td class="geq">800 Hz <br><img class="geqfaderimage" data-frequency="800" src="https://i.imgur.com/ImkN7ng.png"><br>800 Hz</td>
    <td class="geq">1.6 kHz <br><img class="geqfaderimage" data-frequency="1600" src="https://i.imgur.com/ImkN7ng.png"><br>1.6 kHz</td>
    <td class="geq">3.15 kHz <br><img class="geqfaderimage" data-frequency="3150" src="https://i.imgur.com/ImkN7ng.png"><br>3.15 kHz</td>
    <td class="geq">6.3 kHz <br><img class="geqfaderimage" data-frequency="6300" src="https://i.imgur.com/ImkN7ng.png"><br>6.3 kHz</td>
    <td class="geq">12.5 kHz <br><img class="geqfaderimage" data-frequency="12500" src="https://i.imgur.com/ImkN7ng.png"><br>12.5 kHz</td>
  </tr>

```

Relevant part of the CSS code:

```
table.geqtable
{
    margin: auto;
    margin-top: 30px;
    border: 1px solid black;
    padding: 10px;
    box-shadow: 0px 2px 4px 0px #666666;
    text-align: center;
    width: 97%;
    table-layout: fixed;
}

tr.geqtablerow
{
    border: 1px solid black;
}

td.geqtablecell
{
    margin: 0px;
    border: 0px;
    padding: 1px;
}

.geqfaderimage
{
    max-width: 100%;
    height: auto;
    width: 100%;
    float: none;
}

```

Any ideas on how I could achieve the desired behaviour?