代码之家 › 专栏 › 技术社区 › user9338921

忽略表数据之间的间隙

html-table css html

user9338921 · 技术社区 · 7 年前

我有一张桌子,我想要的是不要让内容之间的空间那么大。这就是当前页面的外观:

web page

这是表的一些代码(我不会全部发布,因为它是重复的,所有标记也在末尾关闭)。

我尝试过改变填充和边距,但都不起作用。这是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>

2 回复 | 直到 7 年前

Dhon Joe 7 年前

首先,您有一些在html中没有太多作用的div(div with class second row),当您使用表时,tr标记会自动定义行,所以您不必放置div来表示这是我的第一行等等。。。

根据您使用的浏览器的不同,使用大量边距和到处填充会使您的表格看起来很难看,我尝试重新组织您的代码,并在css中添加了以下内容:

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

你现在所要做的就是使用填充物来改变你想要的空间。如果您想要一张更大的桌子,也可以更改桌子的宽度。下面是一个JSFIDLE:

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

Daniel.loud 7 年前

我最近有这个,你需要在css中使用边框间距。

尝试以下操作:

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

}

使用上述代码,行与行之间将获得6px。

这也应该有帮助: https://www.w3schools.com/cssref/pr_border-spacing.asp