主要是用多张table表格实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> table, table tr th, table tr td { border: 1px solid #666; text-align: center; } body { padding-top: 200px; padding-left: 200px } table { border-collapse: collapse; overflow: auto } .tableOne { 100px; } .tableThree { 100px; /* margin-left: -1px */ } .tableTwo { 800px; /* margin-left: -1px */ } td { 100px; } .left { float: left; } .right { float: left; } .center { float: left; 400px; overflow: auto; } </style> </head> <body> <div class="left"> <table class="tableOne"> <tbody> <tr class="table-row"> <td class="table-name">项目基本</td> </tr> <tr class="table-row"> <td class="table-name">项目基本</td> </tr> <tr class="table-row"> <td class="table-name">项目基本</td> </tr> <tr class="table-row"> <td class="table-name">项目基本</td> </tr> <tr class="table-row"> <td class="table-name">项目基本</td> </tr> <tr class="table-row"> <td class="table-name">项目基本</td> </tr> </tbody> </table> </div> <div class="center"> <table class="tableTwo"> <tbody> <tr class="table-row"> <td class="table-name">项目基本</td> <td class="table-first">项目基本概况</td> <td class="table-all">-9-</td> <td class="table-score">-9-</td> <td class="table-get">83</td> <td class="table-weight">0.8</td> <td class="table-weiscore">26.4</td> </tr> <tr class="table-row"> <td class="table-first">团队基本</td> <td class="table-all">9</td> <td class="table-score">9</td> <td class="table-get">83</td> <td class="table-weight">0.8</td> <td class="table-weiscore">26.4</td> <td class="table-weiscore">26.4</td> </tr> <tr class="table-row"> <td class="table-first">团队n5</td> <td class="table-all">9</td> <td class="table-score">9</td> <td class="table-get">83</td> <td class="table-weight">0.8</td> <td class="table-weiscore">26.4</td> <td class="table-weiscore">26.4</td> </tr> <tr class="table-row"> <td class="table-first">团队n5</td> <td class="table-all">9</td> <td class="table-score">9</td> <td class="table-get">83</td> <td class="table-weight">0.8</td> <td class="table-weiscore">26.4</td> <td class="table-weiscore">26.4</td> </tr> <tr class="table-row"> <td class="table-first">团队n5</td> <td class="table-all">9</td> <td class="table-score">9</td> <td class="table-get">83</td> <td class="table-weight">0.8</td> <td class="table-weiscore">26.4</td> <td class="table-weiscore">26.4</td> </tr> <tr class="table-row"> <td class="table-first">团队n5</td> <td class="table-all">9</td> <td class="table-score">9</td> <td class="table-get">83</td> <td class="table-weight">0.8</td> <td class="table-weiscore">26.4</td> <td class="table-weiscore">26.4</td> </tr> </tbody> </table> </div> <div class="right"> <table class="tableThree"> <tbody> <tr class="table-row"> <td class="table-name">项目基本2</td> </tr> <tr class="table-row"> <td class="table-name">项目基本2</td> </tr> <tr class="table-row"> <td class="table-name">项目基本2</td> </tr> <tr class="table-row"> <td class="table-name">项目基本2</td> </tr> <tr class="table-row"> <td class="table-name">项目基本2</td> </tr> <tr class="table-row"> <td class="table-name">项目基本2</td> </tr> </tbody> </table> </div> </body> </html>