来自：https://getbootstrap.com/docs/4.6/content/tables/

<table class="table table-bordered" style='width:600px'>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table" style='width:600px'>
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table" style='width:600px'>
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 50%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>

<table id="customers">
	<tr>
		<th>粗标题1</th>
		<th>粗标题2</th>
		<th>粗标题3</th>
		<th>粗标题4</th>
	</tr>
	<tr>
		<td>第一区域第1行1001</td>
		<td>第一区域第1行1002</td>
		<td>第一区域第1行1003</td>
		<td>第一区域第1行1004</td>
	</tr>
	<tr>
		<td>第一区域第2行2001</td>
		<td>第一区域第2行2002</td>
		<td>第一区域第2行2003</td>
		<td>第一区域第2行2004</td>
	</tr>
	<tr>
		<td>第一区域第3行3001</td>
		<td>第一区域第3行3002</td>
		<td>第一区域第3行3003</td>
		<td>第一区域第3行3004</td>
	</tr>
	<tr>
		<td>第一区域第4行4001</td>
		<td>第一区域第4行4002</td>
		<td>第一区域第4行4003</td>
		<td>第一区域第4行4004</td>
	</tr>
	<tr>
		<td>第一区域第5行5001</td>
		<td>第一区域第5行5002</td>
		<td>第一区域第5行5003</td>
		<td>第一区域第5行5004</td>
	</tr>
	<tr>
		<td>第一区域第6行6001</td>
		<td>第一区域第6行6002</td>
		<td>第一区域第6行6003</td>
		<td>第一区域第6行6004</td>
	</tr>
	<tr>
		<td>第一区域第7行7001</td>
		<td>第一区域第7行7002</td>
		<td>第一区域第7行7003</td>
		<td>第一区域第7行7004</td>
	</tr>
	<tr>
		<td>第一区域第8行8001</td>
		<td>第一区域第8行8002</td>
		<td>第一区域第8行8003</td>
		<td>第一区域第8行8004</td>
	</tr>
	<tr>
		<td>第一区域第9行9001</td>
		<td>第一区域第9行9002</td>
		<td>第一区域第9行9003</td>
		<td>第一区域第9行9004</td>
	</tr>
	<tr>
		<td>第一区域第10行1001</td>
		<td>第一区域第10行1002</td>
		<td>第一区域第10行1003</td>
		<td>第一区域第10行1004</td>
	</tr>
</table>

• 今日更新动作 14
• 本动作点赞数 122
• 动作评级 优质

<ul class="list-group" style=width:500px>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    今日更新动作
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    本动作点赞数
    <span class="badge badge-primary badge-pill">122</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    动作评级
    <span class="badge badge-primary badge-pill">优质</span>
  </li>
</ul>