文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何将div细胞设置成th？

问如何将div细胞设置成th？
EN

Stack Overflow用户
提问于 2017-08-24 18:38:44
回答 1查看 57关注 0票数 2

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

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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细胞的长度？如果有人知道如何解决这个问题，或者是否有更好的方法来解决这个问题，请告诉我。提前谢谢。

forms
css
html
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-25 12:57:35

css表布局的一个限制是无法模拟colspan，因此单元格的大小将与其“列”中的其他单元格相同，即使它在行中只有1列(正如您在“声学反射阈值”标题中看到的那样)。

您可以做的是使标题成为一个table-caption，而不是一个行，如果在下面运行更新的代码片段，就可以看到这是可行的。

需要进行2项修改：

CSS：为表标题添加新类

代码语言：javascript
复制
div.frCaption{
    display: table-caption; 
    caption-side: top; 
    text-align: center; 
    font-weight: bold;
}

：将表行更改为表标题

在包含“声学反射阈值”标题的行中：

将类从frRow更改为frCaption

完全删除frCell div

代码语言：javascript
复制
[...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...]

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/45868780

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档