How to set margin to only one td tag inside a table in html?

Question

I'm trying to set margin-right property to only one td tag,but not able to achieve it.

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

you can try something like this. is just a fast built of html+css to replicate bootstrap behavior and need more accurate fix of css, but it is something to start from.

My advice is still to use bootstrap or other similar frameworks

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

Answer 2

Margin specification is ignored for table cells. Refer http://www.w3.org/TR/CSS2/tables.html