如何将div单元设置为像？

Question

大家好，我的表单中包含几个不同的字段组。为了将它们保持在一起，我使用了div元素并使它们像表元素一样。我使用此方法来避免表单内的表元素。另一方面，有些人说这种方法基本相同，因为我把div做成了一个表。说实话，我不确定这是不是最好的选择。这是我的代码示例。

form {
	width: 820px;
}
form.frmLayout fieldset {
	border: #ccc 2px solid;
	margin: 10px;
	border-radius:3px;
}
form.frmLayout legend {
	font-weight: bold;
	background-color: #c8e2db;
	border-radius:3px;
	padding: 3px;
	border: #ccc 2px solid;
}
form.frmLayout label {
	float: left;
    font-weight: bold;
    display: block;
}
form.frmLayout input[type=text] { 
	text-align: left;
	background-color: #c8e2db;
}
div.formItem {
	margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-repeat: repeat-x;
    clear: both;
    border-bottom: #ccc 2px dashed;
}
div.formItem:last-child{ 
	border-bottom: none; 
}
div.formTbl {
	display: table;
	width: 100%;
}
div.frRow {
	display: table-row;
	text-align: left;
}
div.frCell {
	display: table-cell;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}
div.frCell span {
	font-weight: bold;
}

<form name="myForm" id="myForm" method="POST" action="#" class="frmLayout">
		<input type="hidden" name="frmhs_id" id="frmhs_id" value="" />
		<fieldset>
			<legend>My Form</legend>
      <div class="formItem">
				<div class="formTbl">
					<div class="frRow">
						<div class="frCell" style="width:60%;">

						</div>
						<div class="frCell" style="width:40%;">
							<div class="formTbl">
								<div class="frRow">
									<div class="frCell" style="width:40%;">
										<span>Acoustic Reflex Thresholds</span>
									</div>
								</div>
								<div class="frRow">
									<div class="frCell" style="width:10%;">
										<span>500</span>
									</div>
									<div class="frCell" style="width:10%;">
										<span>1000</span>
									</div>
									<div class="frCell" style="width:10%;">
										<span>2000</span>
									</div>
									<div class="frCell" style="width:10%;">
										<span>4000</span>
									</div>
								</div>
								<div class="frRow">
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td6" id="frmhs_td6" value="" size="4" maxlength="4" />
									</div>
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td7" id="frmhs_td7" value="" size="4" maxlength="4" />
									</div>
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td8" id="frmhs_td8" value="" size="4" maxlength="4" />
									</div>
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td9" id="frmhs_td9" value="" size="4" maxlength="4" />
									</div>
								</div>
								<div class="frRow">
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td15" id="frmhs_td15" value="" size="4" maxlength="4" />
									</div>
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td16" id="frmhs_td16" value="" size="4" maxlength="4" />
									</div>
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td17" id="frmhs_td17" value="" size="4" maxlength="4" />
									</div>
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td18" id="frmhs_td18" value="" size="4" maxlength="4" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
      <div class="formItem">
				<div style="float:left;">
					<span><input type="submit" name="frmSubmit" id="frmhdSubmit" value="Submit"></span>
				</div>
				<div style="float:right;">
					<span id="MsgFrm"></span>
				</div>
			</div>
		</fieldset>
	</form>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

正如您在上面的示例中所看到的，标题Acoustic Reflex Thresholds不在中心。另外我认为影响第一组div细胞来改变宽度。我想知道我如何能够在整个div单元格上取得头衔？如果有人知道如何解决这个问题或有更好的方法，请告诉我。提前谢谢。

Answer 1

css表格布局的一个限制是你不能模拟colspan，因此单元格的大小与其＃34;列中的其余单元格的大小相同。即使它在行中只有1列（正如你可以看到你的＆＃34;声学反射阈值＆＃34;标题）。

您可以做的是将标题设为table-caption而不是行，并且可以正常运行，如您在下面运行更新的代码段所示。

需要进行2项更改：

CSS ：为表格标题添加新类

div.frCaption{
    display: table-caption; 
    caption-side: top; 
    text-align: center; 
    font-weight: bold;
}

HTML ：将表格行更改为表格标题

在包含你的行＆＃34;声学反射阈值＆＃34;标题：
将课程从frRow更改为frCaption
完全删除frCell div

[...right column...]
<div class="frCell" style="width:40%;">
    <div class="formTbl">
        <div class="frCaption ">
            <span>Acoustic Reflex Thresholds</span>
        </div>
        <div class="frRow">
        [... rest of rows...]

＆＃13;

＆＃13;

form {
	width: 820px;
}
form.frmLayout fieldset {
	border: #ccc 2px solid;
	margin: 10px;
	border-radius:3px;
}
form.frmLayout legend {
	font-weight: bold;
	background-color: #c8e2db;
	border-radius:3px;
	padding: 3px;
	border: #ccc 2px solid;
}
form.frmLayout label {
	float: left;
    font-weight: bold;
    display: block;
}
form.frmLayout input[type=text] { 
	text-align: left;
	background-color: #c8e2db;
}
div.formItem {
	margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-repeat: repeat-x;
    clear: both;
    border-bottom: #ccc 2px dashed;
}
div.formItem:last-child{ 
	border-bottom: none; 
}
div.formTbl {
	display: table;
	width: 100%;
}
div.frRow {
	display: table-row;
	text-align: left;
}
div.frCell {
	display: table-cell;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}
div.frCell span {
	font-weight: bold;
}
div.frCaption{
    display: table-caption; 
    caption-side: top; 
    text-align: center; 
	font-weight: bold;
}

＆＃13;

<form name="myForm" id="myForm" method="POST" action="#" class="frmLayout">
		<input type="hidden" name="frmhs_id" id="frmhs_id" value="" />
		<fieldset>
			<legend>My Form</legend>
      <div class="formItem">
				<div class="formTbl">
					<div class="frRow">
						<div class="frCell" style="width:60%;">

						</div>
						<div class="frCell" style="width:40%;">
							<div class="formTbl">
								<div class="frCaption ">
										<span>Acoustic Reflex Thresholds</span>
								</div>
								<div class="frRow">
									<div class="frCell" style="width:10%;">
										<span>500</span>
									</div>
									<div class="frCell" style="width:10%;">
										<span>1000</span>
									</div>
									<div class="frCell" style="width:10%;">
										<span>2000</span>
									</div>
									<div class="frCell" style="width:10%;">
										<span>4000</span>
									</div>
								</div>
								<div class="frRow">
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td6" id="frmhs_td6" value="" size="4" maxlength="4" />
									</div>
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td7" id="frmhs_td7" value="" size="4" maxlength="4" />
									</div>
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td8" id="frmhs_td8" value="" size="4" maxlength="4" />
									</div>
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td9" id="frmhs_td9" value="" size="4" maxlength="4" />
									</div>
								</div>
								<div class="frRow">
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td15" id="frmhs_td15" value="" size="4" maxlength="4" />
									</div>
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td16" id="frmhs_td16" value="" size="4" maxlength="4" />
									</div>
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td17" id="frmhs_td17" value="" size="4" maxlength="4" />
									</div>
									<div class="frCell" style="width:10%;">
										<input type="text" name="frmhs_td18" id="frmhs_td18" value="" size="4" maxlength="4" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
      <div class="formItem">
				<div style="float:left;">
					<span><input type="submit" name="frmSubmit" id="frmhdSubmit" value="Submit"></span>
				</div>
				<div style="float:right;">
					<span id="MsgFrm"></span>
				</div>
			</div>
		</fieldset>
	</form>

＆＃13;

＆＃13;

＆＃13;