Question

我有一张桌子，我想要的是不要让内容之间的空间变大。这就是页面现在的样子：

web page

所以这是表格的一些代码（我没有全部发布，因为它重复，所有标签也在最后关闭）。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我最近有这个，你需要在css中使用border-spacing。

试试这个：

table{
    border-collapse:separate; 
    border-spacing:0 6px;    

}

使用上面的代码在行之间获得6px。

这也应该有所帮助：check this question

Answer 2

首先，你有一些在你的html中没有做太多的div（第二行的div），当你使用表时，tr标签自动定义行，所以你不必放一个div说这是我的第一排等...

使用大量的边距，并且在任何地方使用填充会使您的桌子看起来很难看，具体取决于您使用的浏览器，我尝试重新组织您的代码并将其添加到您的css中：

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

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

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

忽略表格数据之间的差距

2 个答案: