Javascript 移动视图中的CSS混乱

我有一个简单的嵌套表。三栏-姓名、电子邮件、联系人。在“联系人”列中，我有两个联系人，由一个
分隔。此表在移动视图中以一行低于另一行的形式堆叠

问题：由于两个联系人号码之间有一个分隔符，因此在移动视图中，在列标题之间添加了一个巨大的空格。我只想拿起手机里的“联系人”标题（不要触摸号码），稍微移动一下，以减少两者之间的空间。现在，无论我应用什么css，它都会移动联系人号码。请建议我怎么做

$（函数（）{
$（“.fold table tr.view”）。打开（“单击”，函数（）{
$（this.toggleClass（“打开”）.next（“折叠”）.toggleClass（“打开”）；
});
});
$（'.view，table.child'）。每个（函数（）{
$（'.view:偶数，table.child:偶数'）.addClass（'odd'）；
$（'.view:odd，table.child:odd'）.addClass（'偶数'）；
});
.tableComponent表.parent{
字体系列：“Poppins”；
字体大小：12px；
宽度：60%；
边界：无；
边界塌陷：分离；
边界间距：0 2px；
}
.表组件表THAD th{
边界底部：0；
边界顶部：0；
}
.表组件表td，
th{
边框顶部：0px；
}
表。折叠表>车身>tr视图td，
表。折叠表>车身>tr视图{
光标：指针；
}
表。折叠表>tbody>tr.折叠{
显示：无；
}
表。折叠表>车身>tr.fold.open{
显示：表格行；
}
.奇怪{
背景色：#F2F2；
}
.甚至{
背景色：#F8
}
表1.child{
字体系列：“Poppins”；
字体大小：12px；
宽度：100%；
最高保证金：-0.1雷姆；
边框顶部：2px实心#dbdb；
}
表.折叠表>t车身>tr.折叠打开>td{
填充：0；
}
@全部和全部介质（最大宽度：500px）{
.tableComponent表.parent{
宽度：90%；
左边距：5vw
}
.表格{
显示：无；
}
.表格组件tr{
显示器：flex；
弯曲方向：立柱；
边缘底部：5px；
}
.tableComponent td:：之前{
内容：attr（col）；
字体大小：粗体；
右边填充：20px；
宽度：40vw；
显示：内联块；
}
表1.child{
最高保证金：-0.5雷姆；
}
.联系方式{
显示：内联块；
左边距：-0.2rem；
}
}

名称
电子邮件
接触
约翰
j@g.com
353726

35373726
子数据1
子数据1
子数据1
子数据1
子数据1
子数据1
在css中，内联元素不带边距，因此可以像这样进行垂直对齐

@media all and (max-width: 500px){
  .tableComponent td::before {
    vertical-align: top;
  }
}

您希望它看起来如何：您的意思是希望列标题在顶部对齐吗？还是在中心？只需在内联块上使用
vertical align
，这是否回答了您的问题？在桌面视图中看起来像一团糟。Mobile view外观完美欢迎使用堆栈溢出。欢迎您的贡献，但请注意，不鼓励回答网站上其他地方已经回答过的问题（如此问题）。否则，我们只会鼓励更多的重复问题：）请参阅中的“回答好的问题”部分。正确的做法是链接到现有答案，并在您有足够的代表时将问题标记为重复。@FluffyKitten此行解决了问题。如果这是一个多余的问题，我很抱歉。CSS把我搞糊涂了。由于您已经回答了我之前的问题，因此我在桌面视图中再次询问（否则问题可能会再次重复），我试图通过调整行高（如-table.fold-table>tbody>tr{line height:10px；}来避免在添加2个联系人号码时增加行高但这仍然表明，最上面一行的范围比其他行更广。我在这里遗漏了什么？@HarshVardhanBandta行的高度必须增加，以便能够容纳两行。如果希望所有行的高度相同，可以将联系人号码放在一行上。遗憾的是，这不是一个选项。这是客户的要求。有什么办法可以解决这个问题吗？@HarshVardhanBandta根据你的喜好，你有很多选择：1。使用文本溢出隐藏溢出字符：省略号；2.将数字包装在div中，并给出div溢出：auto；和最大高度属性。这将创建一个具有固定td高度的滚动条，同时不隐藏数据。3.删除br标记并使用逗号代替4。减小联系人号码的字体大小和行距，以适合td中的号码。5.就让它这样吧，它不应该看起来太糟糕。