css - 如何将 div 单元格设置为像 th？

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，因此单元格的大小将与其“列”中的其余部分相同，即使它在行中只有 1 列(如您所见标题为“声反射阈值”)。

您可以做的是将标题设为 table-caption 而不是一行，这样就可以了，如果您运行下面更新的代码片段，您会看到这一点。

需要进行 2 处更改:

CSS:为表格标题添加新类

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

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

在包含“声学反射阈值”标题的行中:
将类从 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...]

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;
}

<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>