下面有一些代码可以设置你需要的表格样式
表格的宽度大小
<table class="custom-table">
<colgroup>
<!-- 设置第1、3、5列自适应宽度 -->
<col style="width: auto;">
<col style="width: 100px;"> <!-- 设置第2列的最小宽度为100px -->
<col style="width: auto;">
<col style="width: 100px;"> <!-- 设置第4列的最小宽度为100px -->
<col style="width: auto;">
</colgroup>
<!-- 设置按比例设置宽度 -->
<colgroup>
<col style="width: 15%;">
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 25%;">
</colgroup>
<tr>
<!-- 列标题 -->
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
<tr v-for="(item, index) in list" :key="item.id">
<!-- 列数据 -->
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</table>合并表格
<table border="1">
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<!-- 每一行的最后一个有可能是一样的,在最后一列的第一行添加 rowspan 属性 -->
<!-- <td v-if="index === 0" rowspan="4">纵向合并</td> -->
</tr>
<tr>
<td colspan="2">横向合并</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
/*border-collapse:collapse合并内外边距(去除表格单元格默认的2个像素内外边距*/用 Table 布局的样式来写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.box {
width: 500px;
background-color: rgb(249, 232, 245);
margin: 0 auto;
}
.box .row .label {
margin-right: 30px;
white-space: nowrap;
}
.table {
display: table;
border-collapse: collapse;
}
.row {
display: table-row;
border: 1px solid #ccc;
border: none;
}
.cell {
display: table-cell;
border: 1px solid #ccc;
padding: 5px;
border: none;
}
</style>
<body>
<div class="box table">
<div class="row">
<div class="label cell">标题1 标题1 标题1</div>
<div class="content cell">
内容, 内容是很多的， 超出一行，需要换行显示， 内容, 内容是很多的，
超出一行，需要换行显示
</div>
</div>
<div class="row">
<div class="label cell">标题2</div>
<div class="content cell">内容可以很多</div>
</div>
</div>
</body>
</html>