这是一个一键生成响应式表格的方案。

table {
width: 100%;
border-collapse: collapse;
text-align: center;
line-height: 40px;
table-layout: fixed;
color: #333;
font-weight: normal;
font-size: 14px;
margin: 5% 0;
td{
padding: 10px;
}
thead {
background-color: #cce5ff;
font-weight: 500;
}
}

table-bordered {
border: 1px solid #e0e0e0;
}

.table-bordered {
th {
background: #e4efff;
border: 1px solid #e0e0e0;
font-weight: normal;
height: auto;
}
td {
background: #e4efff;
border: 1px solid #e0e0e0;
font-weight: normal;
height: auto;
}
thead {
th {
border-bottom: 1px;
font-weight: 500;
height: auto;
}
td {
border-bottom: 1px;
font-weight: 500;
height: auto;
}
}
}
<table border="0" cellspacing="0" cellpadding="0" class="table table-bordered">
<thead>
<tr>
<th style="width: 40%;">题型</th>
<th>题量</th>
<th>分值</th>
</tr>
</thead>
<tbody>
<tr >
<td>{{chapter.name}}</td>
<td>{{chapter.questionCount}} 题</td>
<td>{{chapter.presetScore}}分</td>
</tr>
</tbody>
</table>