如何在引导表中添加更多列
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">📝</a>
<a onclick="return confirm('Are you sure you want to
delete?');"style="font-size:30px"
title="Delete">🗑</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
属性,你可以给th
和td
标签添加border;1px solid black
。你可以给所有td
标签添加colspan
属性,比如<td colspan="1">Value</td>
【讨论】:
以上是关于如何在引导表中添加更多列的主要内容,如果未能解决你的问题,请参考以下文章
如何在一个DataGridView中的一列添加DateTimePicker控件 C#