如何在引导表中添加更多列

Posted

技术标签:

【中文标题】如何在引导表中添加更多列【英文标题】:How to add more columns in table of bootstrap 【发布时间】:2022-01-23 09:45:23 【问题描述】:

我正在制作一个表格来显示 SQL 表格中的详细信息,但它看起来非常拥挤,有人可以帮助我使表格看起来更整洁,边界清晰

  <?php
  include('includes/config.php');

 ?>
  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title> Manage Nurse Data</title>
  <link rel="icon" href="assets/kc.jpg" type="image/x-icon">
  <!-- BOOTSTRAP CORE STYLE  -->
  <link href="assets/css/bootstrap.css" rel="stylesheet" />
  <!-- FONT AWESOME STYLE  -->
  <link href="assets/css/font-awesome.css" rel="stylesheet" />
  <!-- DATATABLE STYLE  -->
  <link href="assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
  <!-- CUSTOM STYLE  -->
  <link href="assets/css/style.css" rel="stylesheet" />
  <!-- GOOGLE FONT -->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' 
   type='text/css' 
     />
  </head>
  <body>
  <!------MENU SECTION START-->
  <!-- MENU SECTION END-->
  <div class="content-wrapper">
  <div class="container">
     <div class="row pad-botm">
        <div class="col-md-12">
           <h4 class="header-line">Manage Contracts</h4>
           <a href="" class="previous round">Back to Dashboard <i class="fa fa-dashboard"> 
           </i></a>
        </div>
        <div class="row">
           <div class="col-md-6">
           </div>
        </div>
        <div class="row">
           <div class="col-md-12">
              <!-- Advanced Tables -->
              <div class="panel panel-info">
                 <div class="panel-heading">
                    <strong>Nurse data</strong>
                 </div>
                 <div class="panel-body">
                    <div class="table-responsive">
                       <table class="table table-striped table-bordered table-hover" 
                        id="dataTables-example">
                          <thead>
                             <tr>
                                <th>#</th>
                                <th>ID</th>
                                <th>Month</th>
                                <th>DOA</th>
                                <th>Name</th>
                                <th>Date_DD</th>
                                <th>GA in weeks </th>
                                <th>Parilty</th>
                                <th>PRV/CS</th>
                                <th>Onset of labour</th>
                                <th>VX_BR_Trr</th>
                                <th>Single/Twin</th>
                                <th>VD/CS</th>
                                 <th>Robson</th>
                                 <th>HB on admission</th>
                                <th>GCT done</th>
                                <th>Urine check</th>
                                <th>Partograph</th>
                                <th>Companion</th>
                                <th>AMTSL</th>
                                <th>Live birth/still birth</th>
                                <th>Need rescue</th>
                                <th>Rooming</th>
                                <th>KMC</th>
                                <th>Baby weight</th>
                                <th>Sex</th>
                                <th>Steriods</th>
                                <th>PPH</th>
                                <th>PIH</th>
                                <th>Sepsis</th>
                                <th>GDM</th>
                                <th>other</th>
                                <th>Anesthesia</th>
                                <th>Anesthetist</th>
                                <th>OT complication</th>
                                <th>DOD</th>
                                <th>FP advice</th>
                                <th>Discharged baby</th>
                                <th>Discharged mother</th>
                                <th>Incident</th>
                                <th>Edit/Delete</th>
                             </tr>
                          </thead>
                          <tbody>
                             <?php $sql = "SELECT * from  tblnursedata";
                                $results=$conn->query($sql);
                                 $results->fetch_all(mysqlI_ASSOC);
                                if($results->num_rows)
                                
                                foreach($results as $result)
                                               ?>
                             <tr class="odd gradeX">
                                <td class="center"></td>
                                <td class="center"><?php echo 
                                   htmlentities($result['ID']);?></td>
                                <td class="center"><?php echo 
                                   htmlentities($result['month']);?></td>
                                <td class="center"><?php echo htmlentities($result['DOA']);?> 
   </td>
                                <td class="center"><?php echo htmlentities($result['name']);?> 
   </td>
                                <td class="center"><?php echo 
htmlentities($result['date_DD']);?></td>
                                <td class="center"><?php echo 
htmlentities($result['GA_in_weeks']);?></td>
                                <td class="center"><?php echo 
  htmlentities($result['parilty']);?></td>
                                <td class="center"><?php echo 
  htmlentities($result['PRV_CS']);?></td>
                                <td class="center"><?php echo 
  htmlentities($result['Onset_of_labour']);?></td>
                                <td class="center"><?php echo 
  htmlentities($result['vx_br_tr']);?></td>
                                <td class="center"><?php echo 
  htmlentities($result['single_twin']);?></td>
                                <td class="center"><?php echo htmlentities($result['VD_CS']);? 
  ></td>
                                <td class="center"><?php echo 
 htmlentities($result['Robson']);?></td>
                                <td class="center"><?php echo 
 htmlentities($result['HB_on_ad']);?></td>
                                <td class="center"><?php echo 
 htmlentities($result['GCT_done']);?></td>
                                <td class="center"><?php echo 
  htmlentities($result['urinech_3']);?></td>
                                <td class="center"><?php echo 
  htmlentities($result['partograph']);?></td>
                                <td class="center"><?php echo 
  

cchtmlentities($result['companion']);?></td>
                                <td class="center"><?php echo htmlentities($result['AMTSL']);? 
  ></td>
                                <td class="center"><?php echo 
 htmlentities($result['Liveb_still']);?></td>
                                <td class="center"><?php echo 
  htmlentities($result['need_rescue']);?></td>
                                <td class="center"><?php echo 
 htmlentities($result['rooming']);?></td>
                                <td class="center"><?php echo htmlentities($result['KMC']);?> 
 </td>
                                <td class="center"><?php echo 
  htmlentities($result['baby_wt']);?></td>
                                <td class="center"><?php echo htmlentities($result['sex']);?> 
 </td>
                                <td class="center"><?php echo 
 htmlentities($result['steriods']);?></td>
                                <td class="center"><?php echo htmlentities($result['PPH']);?> 
 </td>
                                <td class="center"><?php echo htmlentities($result['PIH']);?> 
 </td>
                                <td class="center"><?php echo 
 htmlentities($result['sepsis']);?></td>
                                <td class="center"><?php echo htmlentities($result['GDM']);?> 
      </td>
                                <td class="center"><?php echo htmlentities($result['other']);? 
    ></td>
                                <td class="center"><?php echo 
  htmlentities($result['Anesthesia']);?></td>
                                <td class="center"><?php echo 
  htmlentities($result['Anesthetist']);?></td>
                                <td class="center"><?php echo 
   htmlentities($result['OTcomp']);?></td>
                                <td class="center"><?php echo 
                                   htmlentities($result['DOD']);?></td>
                                <td class="center"><?php echo 
                                   htmlentities($result['FP_advice']);?></td>
                                <td class="center"><?php echo 
  htmlentities($result['d_baby']);?></td>
                                <td class="center"><?php echo htmlentities($result['d_mom']);? 
  ></td>
                                <td class="center"><?php echo 
  htmlentities($result['incident']);?></td>
                                <td class="centre">
                                   <a href="edit-contract.php?ID=<?php echo 
 htmlentities($result['Opportunity_No']);?>"style="font-size:20px;" title="Edit">&#x1F4DD;</a>
                                   <a  onclick="return confirm('Are you sure you want to 
                                      delete?');"style="font-size:30px" 
 title="Delete">&#128465;</a>
                                </td>
                                </td>
                             </tr>
                             <?php ?>      
                          </tbody>
                       </table>
                    </div>
                 </div>
              </div>
              <!--End Advanced Tables -->
           </div>
        </div>
     </div>
    </div>
   <!-- CONTENT-WRAPPER SECTION END-->
   <!-- FOOTER SECTION END-->
   <!-- javascript FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME  -->
   <!-- CORE JQUERY  -->
   <script src="assets/js/jquery-1.10.2.js"></script>
   <!-- BOOTSTRAP SCRIPTS  -->
   <script src="assets/js/bootstrap.js"></script>
   <!-- DATATABLE SCRIPTS  -->
   <script src="assets/js/dataTables/jquery.dataTables.js"></script>
   <script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
   <!-- CUSTOM SCRIPTS  -->
   <script src="assets/js/custom.js"></script>
    </body>
    </html>
    <?php ?>


  This is a page for viewing and editing details taken from a phpmyadmin database I want the 
  table with border and clean in appearance and columns to be well spaced and the details inside the column to appear completely I have not tried chaning the grid layout as I am a novice 

如果有人可以帮助我在不影响表格外观的情况下完成完整的表格,那将是非常棒的,列主要是 varchar 和一些 int

【问题讨论】:

【参考方案1】:

您可以对表格结构进行一些更改。 给表头添加width属性,你可以给thtd标签添加border;1px solid black。你可以给所有td标签添加colspan属性,比如&lt;td colspan="1"&gt;Value&lt;/td&gt;

【讨论】:

以上是关于如何在引导表中添加更多列的主要内容,如果未能解决你的问题,请参考以下文章

如何解析列并向表中添加更多记录?

在引导表中添加链接

如何在一个DataGridView中的一列添加DateTimePicker控件 C#

如何不在 dataverse 表中添加重复值表电源自动添加行

如何在不换行的情况下在引导列之间添加边距[重复]

在现有表中添加更多列,但它没有 [重复]