Question

我正在为我的桌子使用bootstrap3。我需要登录按钮才能成为表格的最后一列。我真的需要它只在引导程序中。

 <!DOCTYPE html>
     <html lang="en">
     <head>
     <title>Bootstrap Example</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <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>
     </head>
    <body>
    <div class="container">
    <h2>Bordered Table</h2>
    <p>The .table-bordered class adds borders to a table:</p>            
    <table class="table">
    <tbody>
      <tr>
		<td rowspan='3'>123</td>
        <td rowspan='3'>C</td>    
        <td rowspan='3'>11-07-1996</td>
        <td rowspan='3'>Male</td>
      </tr>           
      <tr>
        <td>PCMB (Engg and Medical) 2015</td>
        <td>21-09-2015</td>
      </tr>
      <tr>
        <td>PCMB (Engg and Medical) 2016</td>
        <td>21-09-2016</td>
      </tr>
	  <tr>
        <td rowspan='3'><button class="btn btn-primary">Login</button></td>
      </tr> 
            
      </tbody>
      </table>
     </div>

</body>
</html>

我试过但无法解决它。请帮帮我。

Answer 1

试试这段代码

<!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <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>
 </head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>            
<table class="table">
<tbody>
  <tr>
    <td rowspan='3'>123</td>
    <td rowspan='3'>C</td>    
    <td rowspan='3'>11-07-1996</td>
    <td rowspan='3'>Male</td>
  </tr>           
  <tr>
    <td>PCMB (Engg and Medical) 2015</td>
    <td>21-09-2015</td>
  </tr>
  <tr>
    <td>PCMB (Engg and Medical) 2016</td>
    <td>21-09-2016</td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td><button class="btn btn-primary">Login</button></td>
  </tr> 

  </tbody>
  </table>
 </div>

Answer 2

可能是您想要的。如果不是，请详细说明您确切想要按钮的位置。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
</head>

<body>
  <div class="container">
    <h2>Bordered Table</h2>
    <p>The .table-bordered class adds borders to a table:</p>
    <table class="table">
      <tbody>
        <tr>
          <td rowspan='3'>123</td>
          <td rowspan='3'>C</td>
          <td rowspan='3'>11-07-1996</td>
          <td rowspan='3'>Male</td>
        </tr>
        <tr>
          <td>PCMB (Engg and Medical) 2015</td>
          <td>21-09-2015</td>
          <td><button class="btn btn-primary">Login</button>          </td>
        </tr>
        <tr>
          <td>PCMB (Engg and Medical) 2016</td>
          <td>21-09-2016</td>
          <td><td>
        </tr>

      </tbody>
    </table>
  </div>

Answer 3

 <!DOCTYPE html>
   <html lang="en">
   <head>
   <title>Bootstrap Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <style>
    .table > tbody > tr > td {
     vertical-align: middle;
    }
   </style>
   </head>
   <body>
   <div class="container">
    <h2>Bordered Table</h2>
    <p>The .table-bordered class adds borders to a table:</p>
    <table class="table">
    <tbody>
      <tr>
		<td rowspan='3'>123</td>
        <td rowspan='3'>C</td>    
        <td rowspan='3'>11-07-1996</td>
        <td rowspan='3'>Male</td>
        <td>PCMB (Engg and Medical) 2015</td>
        <td>21-09-2015</td>
        <td rowspan='3'><button class="btn btn-primary align-middle">Login</button></td>
      </tr>
      <tr>
        <td>PCMB (Engg and Medical) 2016</td>
        <td>21-09-2016</td>
      </tr>      
      </tbody>
      </table>
      </div>
     <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>
</body>
</html>

bootstrap表类中的rowspan

3 个答案: