文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >表格填充对css没有影响

问表格填充对css没有影响
EN

Stack Overflow用户
提问于 2015-10-15 13:12:57
回答 3查看 55关注 0票数 0

​

代码语言：javascript
运行
复制
#TABLE_1 {
    border-collapse: collapse;
    height: 217px;
    width: 287px;
    perspective-origin: 143.5px 108.5px;
    transform-origin: 143.5px 108.5px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TABLE_1*/

#TBODY_2 {
    border-collapse: collapse;
    height: 217px;
    width: 287px;
    perspective-origin: 143.5px 108.5px;
    transform-origin: 143.5px 108.5px;
    border: 0px none rgb(128, 128, 128);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TBODY_2*/

#TR_3, #TR_7, #TR_11 {
    border-collapse: collapse;
    height: 54px;
    vertical-align: middle;
    width: 287px;
    perspective-origin: 143.5px 27px;
    transform-origin: 143.5px 27px;
    border: 0px none rgb(128, 128, 128);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TR_3, #TR_7, #TR_11*/

#TD_4, #TD_8, #TD_12 {
    border-collapse: collapse;
    height: 52px;
    vertical-align: middle;
    width: 70px;
    perspective-origin: 36px 27px;
    transform-origin: 36px 27px;
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    padding: 0px;
}/*#TD_4, #TD_8, #TD_12*/

#TD_5, #TD_9, #TD_13 {
    border-collapse: collapse;
    height: 24px;
    vertical-align: middle;
    width: 54px;
    perspective-origin: 35px 27px;
    transform-origin: 35px 27px;
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    padding: 15px 15px 15px 1px;
}/*#TD_5, #TD_9, #TD_13*/

#TD_6, #TD_10 {
    border-collapse: collapse;
    height: 24px;
    vertical-align: middle;
    width: 129px;
    perspective-origin: 72.5px 27px;
    transform-origin: 72.5px 27px;
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    padding: 15px 15px 15px 1px;
}/*#TD_6, #TD_10*/

#TD_14 {
    border-collapse: collapse;
    height: 24px;
    vertical-align: middle;
    width: 129px;
    perspective-origin: 72.5px 27px;
    transform-origin: 72.5px 27px;
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    padding: 15px 15px 15px 1px;
}/*#TD_14*/

#TR_15 {
    border-collapse: collapse;
    height: 55px;
    vertical-align: middle;
    width: 287px;
    perspective-origin: 143.5px 27.5px;
    transform-origin: 143.5px 27.5px;
    border: 0px none rgb(128, 128, 128);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TR_15*/

#TD_16 {
    border-collapse: collapse;
    height: 52px;
    vertical-align: middle;
    width: 70px;
    perspective-origin: 36px 27.5px;
    transform-origin: 36px 27.5px;
    border-top: 1px solid rgb(51, 51, 51);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    padding: 1px;
}/*#TD_16*/

#TD_17 {
    border-collapse: collapse;
    height: 24px;
    vertical-align: middle;
    width: 54px;
    perspective-origin: 35px 27.5px;
    transform-origin: 35px 27.5px;
    border-top: 1px solid rgb(51, 51, 51);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    padding: 15px 15px 15px 1px;
}/*#TD_17*/

#TD_18 {
    border-collapse: collapse;
    height: 24px;
    vertical-align: middle;
    width: 129px;
    perspective-origin: 72.5px 27.5px;
    transform-origin: 72.5px 27.5px;
    border-top: 1px solid rgb(51, 51, 51);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    padding: 15px 15px 15px 1px;
}/*#TD_18*/
代码语言：javascript
运行
复制
<table id="TABLE_1">
	<tbody id="TBODY_2">
		<tr id="TR_3">
			<td id="TD_4">
				Adult
			</td>
			<td id="TD_5">
				1
			</td>
			<td id="TD_6">
				10.00 MYR
			</td>
		</tr>
		<tr id="TR_7">
			<td id="TD_8">
				Child
			</td>
			<td id="TD_9">
				1
			</td>
			<td id="TD_10">
				5.00 MYR
			</td>
		</tr>
		<tr id="TR_11">
			<td id="TD_12">
				Promo
			</td>
			<td id="TD_13">
				ABC
			</td>
			<td id="TD_14">
				-5.00 MYR
			</td>
		</tr>
		<tr id="TR_15">
			<td id="TD_16">
			</td>
			<td id="TD_17">
				Total
			</td>
			<td id="TD_18">
				-12.00 MYR
			</td>
		</tr>
	</tbody>
</table>

​

上面的表格有太多的填充，我想通过减少填充来减少表格的高度，但当我应用它时似乎没有效果。为什么？我想我已经将border-coolapse:collapse应用到了表中，并且它将为其td的填充工作

html
css
EN

回答 3

Stack Overflow用户

发布于 2015-10-15 13:21:49

您需要移除所有height并根据需要管理padding，并且您无需在所有td中添加border-collapse: collapse;，只需在table中添加此内容即可。

如果您在第一个td中添加padding或height，它将应用于父tr所有td。

​

代码语言：javascript
运行
复制
table{border-collapse: collapse;}
table td{padding:3px 4px} /* just for example*/
#TABLE_1 {
    
    /*height: 217px;*/
    width: 287px;
    perspective-origin: 143.5px 108.5px;
    transform-origin: 143.5px 108.5px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TABLE_1*/

#TBODY_2 {
    
    /*height: 217px;*/
    width: 287px;
    perspective-origin: 143.5px 108.5px;
    transform-origin: 143.5px 108.5px;
    border: 0px none rgb(128, 128, 128);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TBODY_2*/

#TR_3, #TR_7, #TR_11 {
    
    /*height: 54px;*/
    vertical-align: middle;
    width: 287px;
    perspective-origin: 143.5px 27px;
    transform-origin: 143.5px 27px;
    border: 0px none rgb(128, 128, 128);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TR_3, #TR_7, #TR_11*/

#TD_4, #TD_8, #TD_12 {
    
    /*height: 52px;*/
    vertical-align: middle;
    width: 70px;
    perspective-origin: 36px 27px;
    transform-origin: 36px 27px;
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    padding: 0px;
}/*#TD_4, #TD_8, #TD_12*/

#TD_5, #TD_9, #TD_13 {
    
    /*height: 24px;*/
    vertical-align: middle;
    width: 54px;
    perspective-origin: 35px 27px;
    transform-origin: 35px 27px;
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    /*padding: 15px 15px 15px 1px;*/
}/*#TD_5, #TD_9, #TD_13*/

#TD_6, #TD_10 {
    
    /*height: 24px;*/
    vertical-align: middle;
    width: 129px;
    perspective-origin: 72.5px 27px;
    transform-origin: 72.5px 27px;
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    /*padding: 15px 15px 15px 1px;*/
}/*#TD_6, #TD_10*/

#TD_14 {
    
    /*height: 24px;*/
    vertical-align: middle;
    width: 129px;
    perspective-origin: 72.5px 27px;
    transform-origin: 72.5px 27px;
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    /*padding: 15px 15px 15px 1px;*/
}/*#TD_14*/

#TR_15 {
    
    /*height: 55px;*/
    vertical-align: middle;
    width: 287px;
    perspective-origin: 143.5px 27.5px;
    transform-origin: 143.5px 27.5px;
    border: 0px none rgb(128, 128, 128);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TR_15*/

#TD_16 {
    
    /*height: 52px;*/
    vertical-align: middle;
    width: 70px;
    perspective-origin: 36px 27.5px;
    transform-origin: 36px 27.5px;
    border-top: 1px solid rgb(51, 51, 51);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    padding: 1px;
}/*#TD_16*/

#TD_17 {
    
    /*height: 24px;*/
    vertical-align: middle;
    width: 54px;
    perspective-origin: 35px 27.5px;
    transform-origin: 35px 27.5px;
    border-top: 1px solid rgb(51, 51, 51);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    padding: 15px 15px 15px 1px;
}/*#TD_17*/

#TD_18 {
    
    /*height: 24px;*/
    vertical-align: middle;
    width: 129px;
    perspective-origin: 72.5px 27.5px;
    transform-origin: 72.5px 27.5px;
    border-top: 1px solid rgb(51, 51, 51);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    padding: 15px 15px 15px 1px;
}/*#TD_18*/
代码语言：javascript
运行
复制
<table id="TABLE_1">
	<tbody id="TBODY_2">
		<tr id="TR_3">
			<td id="TD_4">
				Adult
			</td>
			<td id="TD_5">
				1
			</td>
			<td id="TD_6">
				10.00 MYR
			</td>
		</tr>
		<tr id="TR_7">
			<td id="TD_8">
				Child
			</td>
			<td id="TD_9">
				1
			</td>
			<td id="TD_10">
				5.00 MYR
			</td>
		</tr>
		<tr id="TR_11">
			<td id="TD_12">
				Promo
			</td>
			<td id="TD_13">
				ABC
			</td>
			<td id="TD_14">
				-5.00 MYR
			</td>
		</tr>
		<tr id="TR_15">
			<td id="TD_16">
			</td>
			<td id="TD_17">
				Total
			</td>
			<td id="TD_18">
				-12.00 MYR
			</td>
		</tr>
	</tbody>
</table>

​

希望我能帮到你。

票数 0
EN

Stack Overflow用户

发布于 2015-10-15 13:24:08

你必须从tr，td中单独删除高度和填充。

​

代码语言：javascript
运行
复制
#TABLE_1 {
    border-collapse: collapse;
    width: 287px;
    perspective-origin: 143.5px 108.5px;
    transform-origin: 143.5px 108.5px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TABLE_1*/

#TBODY_2 {
    border-collapse: collapse;
    width: 287px;
    perspective-origin: 143.5px 108.5px;
    transform-origin: 143.5px 108.5px;
    border: 0px none rgb(128, 128, 128);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TBODY_2*/

#TR_3, #TR_7, #TR_11 {
    border-collapse: collapse;
    vertical-align: middle;
    width: 287px;
    perspective-origin: 143.5px 27px;
    transform-origin: 143.5px 27px;
    border: 0px none rgb(128, 128, 128);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TR_3, #TR_7, #TR_11*/

#TD_4, #TD_8, #TD_12 {
    border-collapse: collapse;
    vertical-align: middle;
    width: 70px;
    perspective-origin: 36px 27px;
    transform-origin: 36px 27px;
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    padding: 0px;
}/*#TD_4, #TD_8, #TD_12*/

#TD_5, #TD_9, #TD_13 {
    border-collapse: collapse;
    vertical-align: middle;
    width: 54px;
    perspective-origin: 35px 27px;
    transform-origin: 35px 27px;
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TD_5, #TD_9, #TD_13*/

#TD_6, #TD_10 {
    border-collapse: collapse;
    vertical-align: middle;
    width: 129px;
    perspective-origin: 72.5px 27px;
    transform-origin: 72.5px 27px;
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TD_6, #TD_10*/

#TD_14 {
    border-collapse: collapse;
    vertical-align: middle;
    width: 129px;
    perspective-origin: 72.5px 27px;
    transform-origin: 72.5px 27px;
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TD_14*/

#TR_15 {
    border-collapse: collapse;
    vertical-align: middle;
    width: 287px;
    perspective-origin: 143.5px 27.5px;
    transform-origin: 143.5px 27.5px;
    border: 0px none rgb(128, 128, 128);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TR_15*/

#TD_16 {
    border-collapse: collapse;
    vertical-align: middle;
    width: 70px;
    perspective-origin: 36px 27.5px;
    transform-origin: 36px 27.5px;
    border-top: 1px solid rgb(51, 51, 51);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
    padding: 1px;
}/*#TD_16*/

#TD_17 {
    border-collapse: collapse;
    vertical-align: middle;
    width: 54px;
    perspective-origin: 35px 27.5px;
    transform-origin: 35px 27.5px;
    border-top: 1px solid rgb(51, 51, 51);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TD_17*/

#TD_18 {
    border-collapse: collapse;
    vertical-align: middle;
    width: 129px;
    perspective-origin: 72.5px 27.5px;
    transform-origin: 72.5px 27.5px;
    border-top: 1px solid rgb(51, 51, 51);
    border-spacing: 2px 2px;
    font: normal normal 300 normal 18px / normal Nunito, serif;
}/*#TD_18*/
代码语言：javascript
运行
复制
<table id="TABLE_1">
	<tbody id="TBODY_2">
		<tr id="TR_3">
			<td id="TD_4">
				Adult
			</td>
			<td id="TD_5">
				1
			</td>
			<td id="TD_6">
				10.00 MYR
			</td>
		</tr>
		<tr id="TR_7">
			<td id="TD_8">
				Child
			</td>
			<td id="TD_9">
				1
			</td>
			<td id="TD_10">
				5.00 MYR
			</td>
		</tr>
		<tr id="TR_11">
			<td id="TD_12">
				Promo
			</td>
			<td id="TD_13">
				ABC
			</td>
			<td id="TD_14">
				-5.00 MYR
			</td>
		</tr>
		<tr id="TR_15">
			<td id="TD_16">
			</td>
			<td id="TD_17">
				Total
			</td>
			<td id="TD_18">
				-12.00 MYR
			</td>
		</tr>
	</tbody>
</table>

​

票数 0
EN

Stack Overflow用户

发布于 2015-10-15 13:39:22

你必须从每个td中删除高度，然后使用填充。看起来不错。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/33140334

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档