如何在HTML表格中将边距设置为仅一个td标签？

Question

我正在尝试将margin-right属性设置为仅一个td标签，但无法实现。

 table { margin-left: auto; margin-right: auto; border-collapse: collapse; } table, th,[![enter image description here][1]][1] td { border: 2px solid black; } .fixed { padding: 10px; } .line:after { content: ' '; display: block; border: 1px solid black; } .border { word-spacing: 25px; padding-top: 10px; padding-bottom: 10px; background: orange; border-radius: 5px; /* border-style: solid; border-width: px; */ } .fixed { padding: 10px; } .br { display: block; } .bold { font-weight: bold; } .border1 { word-spacing: 25px; padding-top: 10px; padding-bottom: 10px; background: red; border-radius: 5px; /* border-style: solid; border-width: px; */ } .border2 { word-spacing: 25px; padding-top: 10px; padding-bottom: 10px; background: #bfbff2; border-radius: 5px; /* border-style: solid; border-width: px; */ } .border3 { word-spacing: 25px; padding-top: 10px; padding-bottom: 10px; background: skyblue; border-radius: 5px; /* border-style: solid; border-width: px; */ } .border4 { word-spacing: 25px; padding-top: 10px; padding-bottom: 10px; background: yellow; border-radius: 5px; /* border-style: solid; border-width: px; */ } .border5 { word-spacing: 25px; padding-top: 10px; padding-bottom: 10px; background: #bfbfbf; border-radius: 5px; /* border-style: solid; border-width: px; */ } .boxed { padding-left: 2px; padding-right: 2px; padding-top: 10px; padding-bottom: 10px; border: 3px solid blue; margin: auto; border-radius: 10px; } .border6 { word-spacing: 25px; padding-top: 10px; padding-bottom: 10px; background: grey; border-radius: 5px; /* border-style: solid; border-width: px; */ } .right { margin-right: 20px; } 

 <table border="0"> <tr> <th class="text-center" colspan="4">Flight Puck</th> </tr> <tr> <th class="text-center">Behaviour</th> <th class="text-center">Description</th> </tr> <tr> <td class="fixed text-center"><span class="border bold">2210 924-16(267) 1030</span></td> <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span> <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p> </td> </tr> <tr> <td class="fixed text-center"><span class="border1 bold">2210 924-16(267) 1030</span></td> <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span> <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p> </td> </tr> <tr> <td class="fixed text-center"><span class="border2 bold">2210 924-16(267) 1030</span></td> <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span> <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p> </td> </tr> <tr> <td class="fixed text-center"><span class="border3 bold">2210 924-16(267) 1030</span></td> <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span> <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p> </td> </tr> <tr> <td class="fixed text-center"><span class="border4 bold">2210 924-16(267) 1030</span></td> <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span> <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p> </td> </tr> <tr> <td class="fixed text-center"><span class="border5 bold">1215|<span class="boxed">|CX</span>499-02(267)1737</span> </td> <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span> <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p> </td> </tr> <tr> <td class="fixed text-center"><span class="border6 bold">2210 924-16(267) 1030</span></td> <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span> <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p> </td> </tr> <tr> <td class="right fixed text-center"><span class="border6 bold">2210 924-16(267) 1030</span></td> <td class=" text-center"><span class="line text-center bold">Standard Flight Puck</span> <p>Departure time-Flight number-date-passenger Count(Including Non-Revs)-<span class="br">Arrival Time</span></p> </td> </tr> </table> 

Answer 1

表单元格的边距指定被忽略。 请参阅http://www.w3.org/TR/CSS2/tables.html

Answer 2

您可以尝试这样的事情。 只是html + css的快速构建，可以复制引导行为，并且需要更准确的css修复，但这是从头开始的。

我的建议仍然是使用引导程序或其他类似框架

 .table{width: 100%; border: 1px solid #333; display: table; position:relative; } .table .row{ clear: both; position: relative; } .table .row + .row{ border-top: 1px solid #333; } .table .col{ display: inline-block; float: left; } .table .col + .col{ border-left: 1px solid #333; } .col.col25{ width: calc( 25% - 1px ); /*-1 for the border between cell, in this example */ background-color: yellow; } .col.col50{ width: calc( 50% - 1px ); /*-1 for the border between cell, in this example */ background-color: red; } .col.col75{ width: calc( 75% - 1px ); /*-1 for the border between cell, in this example */ background-color: yellow; } 

 <div class="table"> <div class="row"> <div class="col col25">col25</div> <div class="col col75">col75</div> </div> <div class="row"> <div class="col col25">col25</div> <div class="col col75">col75</div> </div> <div class="row"> <div class="col col25">col25</div> <div class="col col75">col75</div> </div> <div class="row"> <div class="col col50">col50</div> <div class="col col50">col50</div> </div> <div class="row"> <div class="col col50">col50</div> <div class="col col50">col50</div> </div> <div class="row"> <div class="col col50">col50</div> <div class="col col50">col50</div> </div> </div>