Question

您好，我正在设计一个表格，其中有一个表格，在该表格内，我也有一个嵌套表格。让我向您展示代码，

<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>之间还有很多空格，

如果您隐藏嵌套表，那么

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

我想要实现的目标：

也请注意，我已经发布了this problem over here。请看看它，如果我对此有任何解决方案，那就太好了。

更新：

如您所见，标签和文本框之间存在巨大差距

我想像这样最小化差距谢谢与问候

Answer 1

您可以使用CSS实现此目的。请仔细检查我的代码。我刚刚添加了这个CSS

tr.header-position.collapsed ~ .members > td {padding: 0;  border: 0;}

当您的收合处打开时，我们需要隐藏填充和边框。如果您需要进一步说明，请告诉我。

	$('.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");
		}
	});

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

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

Answer 2

尝试一下：

<td colspan="2">
            <table id="tblHeaderPosition" >
                  <tr class="header-position"></tr></table></td>

在td标签中在那里开始新表的位置，添加colspan=2。

Answer 3

我对您的问题不太清楚，但是正在寻找类似的内容：

$('.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");
		}
	});

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

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

更改对齐方式并删除tr和td

3 个答案: