表填充没有效果css

Question

#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*/

<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的填充？

Answer 1

您需要根据需要删除所有height并管理padding，而无需在border-collapse: collapse;中添加td，只需将其添加到table中即可1}}。

如果您在第一个padding中添加height或td，则该申请将适用于该父td的所有tr。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望我能帮助你。

Answer 2

您必须逐个删除tr，td的高度和填充。

＆＃13;

＆＃13;

#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*/

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

你必须删除每个td的高度形式，然后使用填充。它会工作。