文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >更改tr和td之间的对齐和移除空格。

问更改tr和td之间的对齐和移除空格。
EN

Stack Overflow用户
提问于 2019-11-22 07:55:18
回答 3查看 182关注 0票数 0

嗨，我在设计一个表格，我有一个表格，在那个表格里，我也有一个嵌套表。让我给你看看密码，

代码语言：javascript
复制
<table class="quiz-template-table">
    <tbody>
       <tr>
          <td class="title">Header Text</td>
           <td class="title-data">
              <input type="text" name="name" id="txt01"/>
           </td>
       </tr>
       <tr>
         <td>
           <table id="tblHeaderPosition">
               <tr class="header-position">
                  <td colspan="2">Specify Position And Styles</td>
               </tr>
               <tr class="position members">
                  <td>Position </td>
                  <td>
                     <select name="Position">
                       <option value="Top-Left">Top-Left</option>
                       <option value="Top-Center">Top-Center</option>
                       <option value="Top-Right">Top-Right</option>
                       <option value="Middle-Left">Middle-Left</option>
                       <option value="Middle-Center">Middle-Center</option>
                       <option value="Middle-Right">Middle-Right</option>
                       <option value="Middle-Left">Bottom-Left</option>
                       <option value="Middle-Center">Bottom-Center</option>
                       <option value="Middle-Right">Bottom-Right</option>
                     </select>
                   </td>
                 </tr>
                 <tr class="position members">
                    <td>Font Name</td>
                     <td>
                        <select name="Font">
                            <option value="1">Font-1</option>
                            <option value="2">Font-2</option>
                            <option value="3">Font-3</option>
                            <option value="4">Font-4</option>
                            <option value="5">Font-5</option>
                        </select>
                     </td>
                 </tr>
                 <tr class="position members">
                     <td>Font Style</td>
                       <td style="width: 2%">
                          <select name="Font-Style">
                              <option value="bold">Bold</option>
                              <option value="italics">Italics</option>
                              <option value="italics">Combine</option>
                           </select>
                        </td>
                   </tr>
        </table>
            </td>
              </tr>
              <tr>
                <td class="title">Sub Header Text</td>
                <td class="title-data">
                   <input type="text" name="name1" id="txt02"/>
                </td>
              </tr>
              <tr>
                <td class="title">Subject</td>
                <td class="title-data">
                    <input type="text" name="name1" id="txt03" />
                </td>
             </tr>
    </tbody>
</table>

现在，如果我删除嵌套表，那么<td>之间的所有对齐和间距都会按预期显示。

让我给你看看，

​

如果我把嵌套的表放在中间有一些空格，

​

​

如您所见，在这些<td>之间有很多空格，而且，

如果隐藏嵌套表，

​

​

如您所见，在指定位置和样式之间有一些空格，和子标题文本。

我想达到的目标是：

​

​

请注意，我已经发布了这个问题在这里。请看一下，如果我能找到任何解决办法的话，那就太好了。

最新情况：

​

​

正如你所看到的，标签和文本框之间存在着巨大的差距。

​

​

我想把差距缩小到这样，谢谢和问候。

html
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-11-22 08:40:23

我不太清楚你的问题，但我正在寻找这样的东西：

​

代码语言：javascript
复制
$('.header-position').click(function () {
		if ($(this).hasClass("collapsed")) {
			$(this).nextUntil('tr.header-position')
			.find('td')
			.parent()
			.find('td > div')
			.slideDown("fast", function () {
				var $set = $(this);
				$set.replaceWith($set.contents());
			});
			$(this).removeClass("collapsed");
		} else {
			$(this).nextUntil('tr.header-position')
			.find('td')
			.wrapInner('<div style="display: block;" />')
			.parent()
			.find('td > div')
			.slideUp("fast");
			$(this).addClass("collapsed");
		}
	});
代码语言：javascript
复制
table {
  border-collapse: collapse;
}
.title{
		color: #8f8f8f;
		font-size: 10px;
		margin: 20px 0 5px;
		letter-spacing: .7px;
		text-transform: uppercase;
	}

	.quiz-template-table td {
		border: 1px solid #f5f5f5;
		padding: 10px;
		vertical-align: top;
	}


	.header-position {
		font-size: 25px;
		font-family: cursive;
		background-color: lightgray;
		cursor: pointer;
	}

	.members {
		font-family: helvetica;
	}
	tr.header-position.collapsed ~ .members > td {
    padding: 0;
    border: 0;
}
代码语言：javascript
复制
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<table class="quiz-template-table">
	<tbody>
		<tr>
			<td class="title">Header Text</td>
			<td class="title-data">
				<input type="text" name="name" id="txt01"/>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<table id="tblHeaderPosition">
					<tr class="header-position">
						<td colspan="2">Specify Position And Styles</td>
					</tr>
					<tr class="position members">
						<td>Position </td>
						<td>
							<select name="Position">
								<option value="Top-Left">Top-Left</option>
								<option value="Top-Center">Top-Center</option>
								<option value="Top-Right">Top-Right</option>
								<option value="Middle-Left">Middle-Left</option>
								<option value="Middle-Center">Middle-Center</option>
								<option value="Middle-Right">Middle-Right</option>
								<option value="Middle-Left">Bottom-Left</option>
								<option value="Middle-Center">Bottom-Center</option>
								<option value="Middle-Right">Bottom-Right</option>
							</select>
						</td>
					</tr>
					<tr class="position members">
						<td>Font Name</td>
						<td>
							<select name="Font">
								<option value="Top-Left">Top-Left</option>
								<option value="Top-Center">Top-Center</option>
								<option value="Top-Right">Top-Right</option>
								<option value="Middle-Left">Middle-Left</option>
								<option value="Middle-Center">Middle-Center</option>
								<option value="Middle-Right">Middle-Right</option>
								<option value="Middle-Left">Bottom-Left</option>
								<option value="Middle-Center">Bottom-Center</option>
								<option value="Middle-Right">Bottom-Right</option>
							</select>
						</td>
					</tr>
					<tr class="position members">
						<td>Font Style</td>
						<td style="width: 2%">
							<select name="Font-Style">
								<option value="bold">Bold</option>
								<option value="italics">Italics</option>
								<option value="italics">Combine</option>
							</select>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td class="title">Sub Header Text</td>
			<td class="title-data">
				<input type="text" name="name1" id="txt02"/>
			</td>
		</tr>
		<tr>
			<td class="title">Subject</td>
			<td class="title-data">
				<input type="text" name="name1" id="txt03" />
			</td>
		</tr>
	</tbody>
</table>

​

票数 1
EN

Stack Overflow用户

发布于 2019-11-22 08:04:17

您可以使用css实现这一点。请仔细检查我的代码。我刚加了这个css

代码语言：javascript
复制
tr.header-position.collapsed ~ .members > td {padding: 0;  border: 0;}

当你的崩溃是开放的，那么我们需要隐藏填充和边界。如果你有进一步的澄清，请告诉我。

​

代码语言：javascript
复制
	$('.header-position').click(function () {
		if ($(this).hasClass("collapsed")) {
			$(this).nextUntil('tr.header-position')
			.find('td')
			.parent()
			.find('td > div')
			.slideDown("fast", function () {
				var $set = $(this);
				$set.replaceWith($set.contents());
			});
			$(this).removeClass("collapsed");
		} else {
			$(this).nextUntil('tr.header-position')
			.find('td')
			.wrapInner('<div style="display: block;" />')
			.parent()
			.find('td > div')
			.slideUp("fast");
			$(this).addClass("collapsed");
		}
	});
代码语言：javascript
复制
	.title{
		color: #8f8f8f;
		font-size: 10px;
		margin: 20px 0 5px;
		letter-spacing: .7px;
		text-transform: uppercase;
	}

	.quiz-template-table td {
		border: 1px solid #f5f5f5;
		padding: 10px;
		vertical-align: top;
	}


	.header-position {
		font-size: 25px;
		font-family: cursive;
		background-color: lightgray;
		cursor: pointer;
	}

	.members {
		font-family: helvetica;
	}
	tr.header-position.collapsed ~ .members > td {
    padding: 0;
    border: 0;
}
代码语言：javascript
复制
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<table class="quiz-template-table">
	<tbody>
		<tr>
			<td class="title">Header Text</td>
			<td class="title-data">
				<input type="text" name="name" id="txt01"/>
			</td>
		</tr>
		<tr>
			<td>
				<table id="tblHeaderPosition">
					<tr class="header-position">
						<td colspan="2">Specify Position And Styles</td>
					</tr>
					<tr class="position members">
						<td>Position </td>
						<td>
							<select name="Position">
								<option value="Top-Left">Top-Left</option>
								<option value="Top-Center">Top-Center</option>
								<option value="Top-Right">Top-Right</option>
								<option value="Middle-Left">Middle-Left</option>
								<option value="Middle-Center">Middle-Center</option>
								<option value="Middle-Right">Middle-Right</option>
								<option value="Middle-Left">Bottom-Left</option>
								<option value="Middle-Center">Bottom-Center</option>
								<option value="Middle-Right">Bottom-Right</option>
							</select>
						</td>
					</tr>
					<tr class="position members">
						<td>Font Name</td>
						<td>
							<select name="Font">
								<option value="Top-Left">Top-Left</option>
								<option value="Top-Center">Top-Center</option>
								<option value="Top-Right">Top-Right</option>
								<option value="Middle-Left">Middle-Left</option>
								<option value="Middle-Center">Middle-Center</option>
								<option value="Middle-Right">Middle-Right</option>
								<option value="Middle-Left">Bottom-Left</option>
								<option value="Middle-Center">Bottom-Center</option>
								<option value="Middle-Right">Bottom-Right</option>
							</select>
						</td>
					</tr>
					<tr class="position members">
						<td>Font Style</td>
						<td style="width: 2%">
							<select name="Font-Style">
								<option value="bold">Bold</option>
								<option value="italics">Italics</option>
								<option value="italics">Combine</option>
							</select>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td class="title">Sub Header Text</td>
			<td class="title-data">
				<input type="text" name="name1" id="txt02"/>
			</td>
		</tr>
		<tr>
			<td class="title">Subject</td>
			<td class="title-data">
				<input type="text" name="name1" id="txt03" />
			</td>
		</tr>
	</tbody>
</table>

​

票数 1
EN

Stack Overflow用户

发布于 2019-11-22 08:10:01

试试这个：

代码语言：javascript
复制
<td colspan="2">
            <table id="tblHeaderPosition" >
                  <tr class="header-position"></tr></table></td>

在td标记中启动新表的地方，添加colspan=2。

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

https://stackoverflow.com/questions/58989816

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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