html - 忽略表数据之间的差距

Question

我有一张 table ，我想要的是不要让内容之间的空间太大。这是页面现在的样子:

这是该表的一些代码(我没有全部发布，因为它是重复的，所有标签也都在末尾关闭)。

我已经尝试更改填充和边距，但它不起作用。这是 CSS:

/*styling the table for the add ons*/

table,
tr,
td,
input {
  margin: 30px;
  padding: 10px;
  margin-right: 20px;
  margin-left: 45px;
  line-height: 1.4em;
  font-size: 17px;
}

.pushRight {
  position: relative;
  left: 10px;
  bottom: 75px;
}

   
<table style="width:100%">
  <tr>
    <td><label><input type="checkbox" name="example" value="Value"><span><b>Voice over artist</b> &ensp; &euro;475</span>
    				<table>
    					<tr>
    						<td class="pushRight">If you require a voice artist for your video project<br>please select this option.</td>
    					</tr>
    				</table>
    			</td>
    			<td><label><input type="checkbox" name="example" value="Text"><span><b>Creative Concept</b>&ensp; &euro;1200</span>
    			<table>
    					<tr>
    						<td class="pushRight">We are bursting with ideas, so if you don't have one of<br>your own please select this option.</td>
    					</tr>
    				</table>
    			</td>
    		</div></tr>
<tr><div class="secondRow">
		<td><label><input type="checkbox" name="example" value="Value"><span><b>Script</b> &ensp; &euro;850</span></label>
		<table>
				<tr>
					<td class="pushRight">If you would like us to allocate our scriptwriter to your project<br>please select this option.</td>
				</tr>
			</table>
		</td>
		<td><label><input type="checkbox" name="example" value="Text"><span><b>Storyboarding</b>&ensp; &euro;875</span>
		<table>
				<tr>
					<td class="pushRight">It is not essential to storyboard every video project, <br>however if you would like to include this process,<br>please select this option.</td>
				</tr>
			</table>
		</td>
	</div></tr>

Answer 1

首先，你有一些 div 在你的 html 中做的不多(类第二行的 div)，当你使用表格时，tr 标签自动定义行，所以你不必放一个div 说那是我的第一行等等...

使用大量边距和到处填充会使您的表格看起来很丑，具体取决于您使用的是哪种浏览器，我尝试重新组织您的代码并在您的 css 中添加了它:

td{
  padding : 20px
}
table{
  margin: 0 auto;
}

您现在所要做的就是使用填充来根据需要更改空间。如果你想要一张更大的 table ，你也可以改变 table 的宽度。 这是一个 jsfiddle:

https://jsfiddle.net/rfroq680/2/