Html 使不同列中的文本以相同的方式转到新行

我有一个包含很多列的表，这些列包含文本、图像和文本。我使用了一些CSS使图像以同样的方式调整大小。现在，当我调整浏览器大小时，文本会分成多行。我希望它在同一时间发生在所有文本上，但我不知道如何做到这一点

完整的HTML和CSS代码，以及JSFIDLE上的工作示例：

HTML代码的相关部分：

  <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>

---

关于如何实现所需行为的任何想法？

只需在数字和单位（Hz/kHz）之间插入一个

标记即可

给你：

*
{
字体系列：“蒙特塞拉特”，无衬线；
}
身体
{
保证金：自动；
字体大小：大号；
}
表1.geqtable
{
保证金：自动；
边缘顶部：30px；
边框：1px纯黑；
填充：10px；
盒影：0px 2px 4px 0px#666666；
文本对齐：居中；
宽度：97%；
表布局：固定；
}
tr.geqtablerow
{
边框：1px纯黑；
}
td.geqtablecell
{
边际：0px；
边界：0px；
填充：1px；
}
.音量控制
{
宽度：100%；
}
.geqfaderimage
{
最大宽度：100%；
高度：自动；
宽度：100%；
浮动：无；
}
按钮，控制按钮
{
字号：x大号；
}
h1
{
保证金：0px 0px 10px 0px；
字体大小：xx大号；
文字装饰：下划线；
}
氢
{
利润率：10px 0px；
字号：x大号；
文字装饰：下划线；
}
h3
{
边界：0px；
填充：0px；
保证金：0px 0px 5px 0px；
字体大小：大号；
文字装饰：下划线；
}
h4
{
利润率：10px 0px；
字体大小：大号；
文字装饰：下划线；
}
A.
{
颜色：#0000BB；
}
a:悬停
{
颜色：#000000；
}
.左对齐
{
文本对齐：左对齐；
}
.居中对齐
{
文本对齐：居中；
}
.右对齐
{
文本对齐：右对齐；
}
@媒体屏幕和屏幕（最小宽度：800px）{
.分频器{显示：无；}
}

频率训练器

100
Hz

100
Hz
200
Hz

200
Hz
400
Hz

400
Hz
800
Hz

800
Hz
1.6
kHz

1.6
kHz
3.15
kHz

3.15
kHz
6.3
kHz

6.3
kHz
12.5
kHz

12.5
kHz


音量：







开始
停止



下一个

实现这一目标有多种方法。一种方法是在设备变小时调整字体大小，但在某个时候，对字体大小进行更改，使其全部换行

另一种方法是删除

s并将所有文本包装在

标记中，以便通过CSS控制其宽度：

。。。
100赫兹
100赫兹
...

@介质（最大宽度：720px）{
.geq span{
最大宽度：50px；
显示：内联块；
}
}

看到了

或者您可以渲染一些

说话者并切换其显示属性。或者，您可以制作三行并垂直对齐元素，这样即使某些元素断开，而某些元素未断开，它们也会看起来对齐

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;
}

<td class="geq">100<br class="frequency-divider" /> Hz ... </td>

@media screen and (min-width: 800px) {
    .frequency-divider { display: none; }
}