首页 > 代码库 > bootstrap3-表格

bootstrap3-表格

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<title>bootstrap3</title>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  

</head>

<body>

<div class="container">

<h2>表格</h2>

      <p>创建响应式表格 (将在小于768px的小型设备下水平滚动)。另外:添加交替单元格的背景色:</p> 

      <div class="table-responsive">

      <table class="table table-striped table-bordered">

      <thead>

          <tr>

            <th>#</th>

            <th>Name</th>

            <th>Street</th>

          </tr>

        </thead>


        <tbody>

          <tr>

            <td>1</td>

            <td>Anna Awesome</td>

            <td>Broome Street</td>

          </tr>

          <tr>

            <td>2</td>

            <td>Debbie Dallas</td>

            <td>Houston Street</td>

          </tr>

          <tr>

            <td>3</td>

            <td>John Doe</td>

            <td>Madison Street</td>

          </tr>

        </tbody>

      </table>

      </div>

</div>

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>


本文出自 “素颜” 博客,请务必保留此出处http://suyanzhu.blog.51cto.com/8050189/1895623

bootstrap3-表格