HTML CSS table设置宽度之后，子元素td文字挤压变形的问题

.leave_messages table
{
padding-top: 10px;
padding-left: 10px;
padding-bottom: 250px;
height: 597.8px;
width: 400px;
margin: 10px 5px 10px 5px;
border: 3px ridge #B0B0B0;
}
.leave_messages th
{
margin-top: 5px;
}
.leave_messages td
{
margin: 10px;
width: auto;
}
.leave_messages_td_left
{
font-weight: 600;
}
.leave_messages_td_replay
{
color: brown;
}

在td的父级元素设置display: flex;就行

.leave_messages tr
{
display: flex;
}