如何仅使用<div>标签和Bootstrap实现与table标签一致的表格

你想要把基于<table>标签的Bootstrap表格改成纯<div>结构来实现相同样式对吧？我帮你完成了改造，下面的代码可以完美还原你截图里的表格效果：

改造后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example of Bootstrap 3 Simple Tables with Divs</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        .bs-example{
            margin: 20px;
        }
        /* 模拟table结构的核心样式 */
        .div-table {
            display: table;
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }
        .div-table-head {
            display: table-header-group;
            background-color: #f5f5f5;
        }
        .div-table-row {
            display: table-row;
        }
        .div-table-cell {
            display: table-cell;
            padding: 8px;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }
        /* 表头单元格的样式 */
        .div-table-head .div-table-cell {
            font-weight: bold;
            vertical-align: bottom;
            border-bottom: 2px solid #ddd;
        }
        /* 偶数行背景（可选，和Bootstrap的.table-striped一致） */
        .div-table-body .div-table-row:nth-child(even) {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="bs-example">
        <!-- 模拟table标签 -->
        <div class="div-table table">
            <!-- 模拟thead标签 -->
            <div class="div-table-head">
                <!-- 模拟tr标签 -->
                <div class="div-table-row">
                    <!-- 模拟th标签 -->
                    <div class="div-table-cell">Row</div>
                    <div class="div-table-cell">First Name</div>
                    <div class="div-table-cell">Last Name</div>
                    <div class="div-table-cell">Email</div>
                </div>
            </div>
            <!-- 模拟tbody标签 -->
            <div class="div-table-body">
                <!-- 第一行数据 -->
                <div class="div-table-row">
                    <div class="div-table-cell">1</div>
                    <div class="div-table-cell">John</div>
                    <div class="div-table-cell">Carter</div>
                    <div class="div-table-cell">johncarter@mail.com</div>
                </div>
                <!-- 第二行数据 -->
                <div class="div-table-row">
                    <div class="div-table-cell">2</div>
                    <div class="div-table-cell">Peter</div>
                    <div class="div-table-cell">Parker</div>
                    <div class="div-table-cell">peterparker@mail.com</div>
                </div>
                <!-- 第三行数据 -->
                <div class="div-table-row">
                    <div class="div-table-cell">3</div>
                    <div class="div-table-cell">John</div>
                    <div class="div-table-cell">Rambo</div>
                    <div class="div-table-cell">johnrambo@mail.com</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

关键说明 #

• 我们用CSS的display属性来模拟表格的布局：
  • display: table对应原<table>标签
  • display: table-header-group对应原<thead>标签
  • display: table-row对应原<tr>标签
  • display: table-cell对应原<th>和<td>标签
• 样式上完全对齐Bootstrap的.table类，包括内边距、边框、表头样式，甚至还加了可选的斑马纹效果（和.table-striped一致）
• 保留了原代码的Bootstrap依赖，确保响应式等特性正常工作

内容的提问来源于stack exchange，提问作者Prajna Hegde