Heim > Artikel > Web-Frontend > So bedienen Sie Tabellen in Bootstrap

So bedienen Sie Tabellen in Bootstrap

php中世界最好的语言Original: 2018-03-23 16:56:361796Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie Tabellen in Bootstrap bedienen und welche Vorsichtsmaßnahmen beim Betrieb von Tabellen in Bootstrap gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Das Beispiel in diesem Artikel beschreibt die von Bootstrap implementierte Tabellenzusammenführung von Zellen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Problemhintergrund

Verwenden Sie Bootstrap, um die Tabelle zu entwerfen, und die Tabelle muss Zellen zusammenführen

2. Implementierungsquellcode

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Bootstrap-表格合并单元格</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="external nofollow" />
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js" ></script>
    <style>
      body,html{
        width: 99%;
        height: 98%;
        font-family: "微软雅黑";
        font-size: 14px;
      }
      table{
        width: 100%;
      }
    </style>
    <script>
    </script>
  </head>
  <body>
    <p class="row">
      <p class="col-xs-12">
        <table class="table table-striped">
          <tr>
            <td>
              <label for="stuNo">学号：</label>
              <input type="text" id="stuNo" />
              <p class="btn-group" style="width: 157px; height: 26px;">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width: 157px; height: 26px;">
                  班级
                </button>
                <ul class="dropdown-menu" role="menu">
                 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一班</a></li>
                 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二班</a></li>
                 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >三班</a></li>
                 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >四班</a></li>
                 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >五班</a></li>
                </ul>
              </p>
              <button type="button" class="btn btn-primary">查询</button>
              <button type="button" class="btn">重置</button>
            </td>
          </tr>
        </table>
      </p>
      <p class="col-xs-12">
        <p class="col-xs-2">
          <table class="table table-striped table-bordered">
            <caption>学生表</caption>
            <thead>
              <tr>
                <th>学生</th>
                <th>学号</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>胡思</td>
                <td>2016010101</td>
              </tr>
              <tr>
                <td>赵四</td>
                <td>2016010102</td>
              </tr>
              <tr>
                <td>陈诚</td>
                <td>2016010103</td>
              </tr>
              <tr>
                <td>李磊</td>
                <td>2016010104</td>
              </tr>
              <tr>
                <td>孙杨</td>
                <td>2016010105</td>
              </tr>
              <tr>
                <td>李爽</td>
                <td>2016010106</td>
              </tr>
            </tbody>
          </table>
          <table class="table table-striped table-bordered">
            <caption>学生表</caption>
            <thead>
              <tr>
                <th>学生</th>
                <th>学号</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>胡思</td>
                <td>2016010101</td>
              </tr>
              <tr>
                <td>赵四</td>
                <td>2016010102</td>
              </tr>
              <tr>
                <td>陈诚</td>
                <td>2016010103</td>
              </tr>
              <tr>
                <td>李磊</td>
                <td>2016010104</td>
              </tr>
              <tr>
                <td>游豪</td>
                <td>2016010105</td>
              </tr>
            </tbody>
          </table>
        </p>
        <p class="col-xs-10">
          <table class="table table-striped">
            <tr style="text-align: center;">
              <td>到校</td>
              <td>回家</td>
              <td>距离</td>
            </tr>
            <tr style="text-align: center;">
              <td colspan="2" style="text-align: center;">222</td>
              <td rowspan="2" style="width: 200px;">
                <p class="col-xs-12">
                  <table class="table table-striped table-bordered">
                    <thead>
                      <tr>
                        <th>姓名</th>
                        <th>学号</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>胡思</td>
                        <td>2016010101</td>
                      </tr>
                    </tbody>
                  </table>
                </p>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: center;">333</td>
            </tr>
          </table>
          <table class="table table-striped">
            <tr style="text-align: center;">
              <td>到校</td>
              <td>回家</td>
              <td>距离</td>
            </tr>
            <tr style="text-align: center;">
              <td colspan="2" style="text-align: center;">222</td>
              <td rowspan="2" style="width: 200px;">
                <p class="col-xs-12">
                  <table class="table table-striped table-bordered">
                    <thead>
                      <tr>
                        <th>姓名</th>
                        <th>学号</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>胡思</td>
                        <td>2016010101</td>
                      </tr>
                    </tbody>
                  </table>
                </p>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: center;">333</td>
            </tr>
          </table>
          <table class="table table-striped">
            <tr style="text-align: center;">
              <td>到校</td>
              <td>回家</td>
              <td>距离</td>
            </tr>
            <tr style="text-align: center;">
              <td colspan="2" style="text-align: center;">222</td>
              <td rowspan="2" style="width: 200px;">
                <p class="col-xs-12">
                  <table class="table table-striped table-bordered">
                    <thead>
                      <tr>
                        <th>姓名</th>
                        <th>学号</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>胡思</td>
                        <td>2016010101</td>
                      </tr>
                    </tbody>
                  </table>
                </p>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: center;">333</td>
            </tr>
          </table>
          <table class="table table-striped">
            <tr style="text-align: center;">
              <td>到校</td>
              <td>回家</td>
              <td>距离</td>
            </tr>
            <tr style="text-align: center;">
              <td colspan="2" style="text-align: center;">222</td>
              <td rowspan="2" style="width: 200px;">
                <p class="col-xs-12">
                  <table class="table table-striped table-bordered">
                    <thead>
                      <tr>
                        <th>姓名</th>
                        <th>学号</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>胡思</td>
                        <td>2016010101</td>
                      </tr>
                    </tbody>
                  </table>
                </p>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: center;">333</td>
            </tr>
          </table>
        </p>
      </p>
    </p>
  </body>
</html>

3. Implementierungsergebnis

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So beheben Sie einen npm-Installationsfehler

Vue-Aufzählungstyp implementiert HTML

Das obige ist der detaillierte Inhalt vonSo bedienen Sie Tabellen in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JS ruft den Wert im ersten Element im Auswahl-Dropdown-Feld abNächster Artikel：JS ruft den Wert im ersten Element im Auswahl-Dropdown-Feld ab

In Verbindung stehende Artikel

Mehr sehen