如何在html中的一列下包含3列

Question

How to include 3 columns under one column in html:

在此处输入图像描述我在代码中使用表，希望你能理解这一点[看起来你的帖子主要是代码；请添加更多详细信息。]-这个错误在发布代码时很烦人，这就是我不发送代码的原因。

我不想多说了。

<form action="codeadd.php" method="POST" class="content">
<table class="btn-secondary">
<tr>
<td>
<div class="mb-3">
<label>Date Inquiry</label>
<input type="date" name="date_inquiry"  class="form-control" />
</div>
</td>
<td>
<div class="mb-3">
<label>Date Responded</label>
<input type="date" name="date_responded"  class="form-control" />
</div>
</td>
<td>
<div class="mb-3">
<label>Source</label>
<input type="text" name="source" class="form-control" />
</div>
</td>
<td>
<div class="mb-3">
<label>Location</label>
<input type="text" name="location"  class="form-control" />
</div>
</td>
</tr>
<tr>
<td>
<div class="mb-3">
<label>Size Inquiry</label>
<input type="textbox" name="size_inquiry"  class="form-control" />
</div>
</td>
<td>
<div class="mb-3">
<label>Category</label>
<input class="form-control" name="category" type="text" list="brands" />
<datalist id="brands">
<option><?php
$query = "SELECT category FROM crs_sizes WHERE category is not 
null";
$stmt = $database->prepare($query);
$stmt->execute();
foreach ($stmt as $row){?></option>
<option><?php echo $row['category']; ?></option><?php 
} ?>
</datalist>
</div>
</td>
<td>
<div class="mb-3">
<label>Recepient</label>
<input type="text" name="recepient"  class="form-control" />
</div>
</td>
<td>
<div class="mb-3">
<label>Email</label>
<input type="text" name="email"  class="form-control" />
</div>
</td>
</tr>
<tr>
<td>
<div class="mb-3">
<label>First Name</label>
<input type="text" name="firstname"  class="form-control" />
</div>
</td>
<td>
<div class="mb-3">
<label>Middle Name</label>
<input type="text" name="middlename"  class="form-control" />
</div>
</td>
<td>
<div class="mb-3">
<label>Last Name</label>
<input type="text" name="lastname"  class="form-control" />
</div>
</td>
<td>
<div class="mb-3">
<label>Contact Number</label>
<input type="number" name="contact_no" oninput="javascript: if 
(this.value.length > this.maxLength) this.value = 
this.value.slice(0, this.maxLength);" maxlength="11"  class="form- 
control" />
</div>
</td>

</tr>
<tr>
<td>
<div class="mb-3">
<label>Size</label>
<select class="form-control" name="size">
<option value="" disabled selected></option>
<?php
$query = "SELECT SIZE FROM SBP";
$stmt = $database->prepare($query);
$stmt->execute();
foreach ($stmt as $row){?>
<option><?php echo $row['SIZE']; ?>
</option>
<?php } ?>
</select>
</div>
</td>
<td>
<div class="mb-3">
<label>Brand</label>
<input class="form-control" name="brand" type="text" list="brands" />
<datalist id="brands">
<option><?php
$query = "SELECT brand FROM crs_sizes WHERE brand is not 
null";
$stmt = $database->prepare($query);
$stmt->execute();
foreach ($stmt as $row){?></option>
<option><?php echo $row['brand']; ?></option><?php } 
?>
</datalist>
</div>
</td>
<td>
<div class="mb-3">
<label>Size</label>
<select class="form-control" name="pattern">
<option value="" disabled selected></option>
<?php
$query = "SELECT PATTERN FROM SBP";
$stmt = $database->prepare($query);
$stmt->execute();
foreach ($stmt as $row){?>
<option><?php echo $row['PATTERN']; ?></option>
<?php } ?>
</select>
</div>
</td>
<td>
<div class="mb-3">
<label>Description</label>
<input type="text" name="description"  class="form-control" required />
</div>
</td>                      
</tr>
<tr>
<td>
<div class="mb-3">
<label>Customer Response</label>
<input type="text" name="customer_response"  class="form-control" />
</div>
</td>
<td>
<div class="mb-3">
<label>Feedback Dealer TSR</label>
<input type="text" name="feedback_dealer_tsr"  class="form-control" />
</div>
</td>

<td>
<div class="mb-3">
<label>Other Concern</label>
<input type="text" name="other_concern"  class="form-control" />
</div>
</td>
<td>
<div class="mb-3">
<label>Purchase</label>
<input type="text" name="purchased"  class="form-control" />
</div>
</td>
</tr>
<tr class="col-md-12">
<td>
<div class="mb-3">
<label>Reccomended Daeler TSR</label>
<input type="text" name="recom_dealer_tsr"  class="form-control" 
required />
</div>
</td>
<td>
<div class="mb-3">
<label>Status</label>
<input type="text" name="status"  class="form-control" />
</div>
</td>
<td>
<div class="mb-3">
<label>CRS Last Action Taken</label>
<input required type="text" name="crs_last_action_taken"  class="form- 
control" />
</div>
</td>
</tr>   
</table>
<table class="col-md-11">
<tr>
<td>
<div class="mb-3">
<button type="submit" name="submit" class="btn btn-primary">Save 
Records</button>
</div>
</td>
</tr>
</table>

</form>

请参考我上面的代码。非常感谢。

Answer 1

使用

显示：网格

它将允许您在1库仑下显示3列

Answer 2

从示例图像中，在size列中，您希望替换"下拉菜单"；带有3个盒子，，，

试试这个，，

<div class="mb-3">
<label>Size</label>
<div>
<?php
$query = "SELECT SIZE FROM SBP";
$stmt = $database->prepare($query);
$stmt->execute(); 
foreach ($stmt as $row){
?>
<div><?php echo $row['SIZE']; ?></div>
<?php 
} ?>
</div>
</div>