html - 更改对齐方式并删除 tr 和 td 之间的空格

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> 之间的所有对齐方式和间距s 按预期显示

让我告诉你，

现在如果我放置嵌套表格，它们之间会有一些空格，

如您所见，<td> 之间有很多空格s 也在那里，

如果隐藏嵌套表格，

如您所见，Specify Position and styles 和 Subheader Text..

之间有一些空格

我想要实现的目标:

另请注意，我已发布 this problem over here .请看一下，如果我能得到任何关于此的解决方案，那就太好了。

更新:

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

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

Answer 1

我不是很清楚你的问题，但正在寻找这样的东西:

$('.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>