请帮帮我。我需要把桌子固定好。我不能改变HTML,但我只有一个问题。为什么tr不想成为100%,它只是按内容宽度。我必须保存相同的样式和HTML代码。
.row {
margin: 0;
width: 100%;
height: auto;
overflow: hidden;
flex-grow: 0;
flex-shrink: 0;
position: relative;
padding-top: 50px;
box-sizing: border-box;
overflow: hidden;
margin-top: 7px;
}
.content_body {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
flex-grow: 0;
flex-shrink: 1;
width: 100%;
height: 100px;
overflow: auto;
padding-bottom: 5px;
}
table{
width: 100%;
border: 1px solid #dcdcdc;
box-sizing: border-box;
border-collapse: collapse;
}
table tr {
width: 100%;
}
table thead {
color: #a2a1a1;
background: none;
vertical-align: middle;
}
table thead th {
font-size: 1.2em;
font-weight: normal;
text-align: center;
border: 1px solid #dcdcdc;
padding: 0.6%;
box-sizing: border-box;
}
table tbody {
color: #444;
background: none;
vertical-align: middle;
}
table tbody td {
font-size: 1em;
font-weight: normal;
text-align: center;
border: 1px solid #dcdcdc;
box-sizing: border-box;
padding: 0.55% 0.37%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
table th:nth-child(4),
table td:nth-child(4),
table th:nth-child(1),
table td:nth-child(1) {
width: 20%;
}
table th:nth-child(2),
table td:nth-child(2) {
width: 12.3%;
}
table th:nth-child(3),
table td:nth-child(3) {
width: 30%;
}
table th:nth-child(5),
table td:nth-child(5) {
width: 30%;
}
table thead {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #fff;
}

<div class="row">
<div class="content_body">
<table>
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
<th>Title 5</th>
</tr>
<tr>
<th>Title 1.1</th>
<th>Title 1.2</th>
<th>Title 1.3</th>
<th>Title 1.4</th>
<th>Title 1.5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
</div>
&#13;