htmlのテーブル内に1つのtdタグだけに余白を設定するにはどうすればよいですか？

Question

私は一つだけtdタグにmargin-rightプロパティを設定しようとしているが、それを達成することができませんよ。

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

は、あなたがこのような何かを試すことができます参照してください。 はただ速いブートストラップ動作を複製し、CSSのより正確な修正を必要とするために、HTML + CSSで構築されたが、から開始するものです。

私のアドバイスは、ブートストラップまたは他の同様のフレームワーク

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

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