1. 首頁
  2. 問答
  3. 表填充不起作用CSS

表填充不起作用CSS

2015-10-15 112 views
0

表填充不起作用CSS

#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"> 
 
\t <tbody id="TBODY_2"> 
 
\t \t <tr id="TR_3"> 
 
\t \t \t <td id="TD_4"> 
 
\t \t \t \t Adult 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_5"> 
 
\t \t \t \t 1 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_6"> 
 
\t \t \t \t 10.00 MYR 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr id="TR_7"> 
 
\t \t \t <td id="TD_8"> 
 
\t \t \t \t Child 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_9"> 
 
\t \t \t \t 1 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_10"> 
 
\t \t \t \t 5.00 MYR 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr id="TR_11"> 
 
\t \t \t <td id="TD_12"> 
 
\t \t \t \t Promo 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_13"> 
 
\t \t \t \t ABC 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_14"> 
 
\t \t \t \t -5.00 MYR 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr id="TR_15"> 
 
\t \t \t <td id="TD_16"> 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_17"> 
 
\t \t \t \t Total 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_18"> 
 
\t \t \t \t -12.00 MYR 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table>

上面的表格有太多的填充物，我要通過降低填充，以減少檯面的高度，但似乎當我申請沒有影響它。爲什麼？我以爲我已經申請border-coolapse:collapse到表中，它將爲其td的填充工作？

來源

2015-10-15 May Sun

回答

0

您需要刪除所有height，並根據您的需要管理padding，你沒有必要在所有td添加border-collapse: collapse;只添加這在table。

如果您在第一td添加padding或height它將應用與父母tr的所有td。

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*/
<table id="TABLE_1"> 
 
\t <tbody id="TBODY_2"> 
 
\t \t <tr id="TR_3"> 
 
\t \t \t <td id="TD_4"> 
 
\t \t \t \t Adult 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_5"> 
 
\t \t \t \t 1 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_6"> 
 
\t \t \t \t 10.00 MYR 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr id="TR_7"> 
 
\t \t \t <td id="TD_8"> 
 
\t \t \t \t Child 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_9"> 
 
\t \t \t \t 1 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_10"> 
 
\t \t \t \t 5.00 MYR 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr id="TR_11"> 
 
\t \t \t <td id="TD_12"> 
 
\t \t \t \t Promo 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_13"> 
 
\t \t \t \t ABC 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_14"> 
 
\t \t \t \t -5.00 MYR 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr id="TR_15"> 
 
\t \t \t <td id="TD_16"> 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_17"> 
 
\t \t \t \t Total 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_18"> 
 
\t \t \t \t -12.00 MYR 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table>

希望我可以幫助你。

來源

2015-10-15 05:21:49

0

您必須逐個刪除tr，td的高度和填充。

#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*/
<table id="TABLE_1"> 
 
\t <tbody id="TBODY_2"> 
 
\t \t <tr id="TR_3"> 
 
\t \t \t <td id="TD_4"> 
 
\t \t \t \t Adult 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_5"> 
 
\t \t \t \t 1 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_6"> 
 
\t \t \t \t 10.00 MYR 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr id="TR_7"> 
 
\t \t \t <td id="TD_8"> 
 
\t \t \t \t Child 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_9"> 
 
\t \t \t \t 1 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_10"> 
 
\t \t \t \t 5.00 MYR 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr id="TR_11"> 
 
\t \t \t <td id="TD_12"> 
 
\t \t \t \t Promo 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_13"> 
 
\t \t \t \t ABC 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_14"> 
 
\t \t \t \t -5.00 MYR 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t \t <tr id="TR_15"> 
 
\t \t \t <td id="TD_16"> 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_17"> 
 
\t \t \t \t Total 
 
\t \t \t </td> 
 
\t \t \t <td id="TD_18"> 
 
\t \t \t \t -12.00 MYR 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table>

來源

2015-10-15 05:24:08

0

您必須刪除高度表單中的每個TD，然後使用填充。它會工作。

來源

2015-10-15 05:39:22

相關問題

 相關問題