title: How to move items left and right in an html table using css? -
body: <p>I have 6 <code>&lt;td&gt;</code>s in my <code>&lt;tr&gt;</code>s and I want the last 3 in each row to all be closer together. How can I move them?</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;p&gt; Test.com Funtown &lt;div&gt;&lt;a href="#"&gt;Click Here&lt;/a&gt;&lt;/div&gt; &lt;/p&gt;
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td class="statusRunning"&gt;R&lt;/td&gt;
          &lt;td&gt;My First Try&lt;/td&gt;
          &lt;td&gt;100 / 250 plays&lt;/td&gt;
          &lt;td&gt;&lt;a href="#"&gt;Players&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a href="#"&gt;Duplicate&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a href="#"&gt;Archive&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="statusQueued"&gt;1&lt;/td&gt;
          &lt;td&gt;The best try&lt;/td&gt;
          &lt;td&gt;0 / 250 plays&lt;/td&gt;
          &lt;td&gt;&lt;a href="#"&gt;Players&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a href="#"&gt;Duplicate&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a href="#"&gt;Archive&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class="statusIncomplete"&gt; &lt;/td&gt;
          &lt;td&gt;Could be better&lt;/td&gt;
          &lt;td&gt;0 / 50 plays&lt;/td&gt;
          &lt;td&gt;&lt;a href="#"&gt;Players&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a href="#"&gt;Duplicate&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a href="#"&gt;Archive&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt; 
  </code></pre>
  
  <p>Here is my css:</p>
  
  <pre><code>p {
  }
  div a { 
  }
  table {
    padding: 0;
    margin: 10;
    border-left: none;
    border-right: none;
    text-align:right;      
    border-collapse:separate;
    border-spacing: 0 2px;
  }
  
  table tr       {background:#fff;}
  table tr:hover {background:#EBF7FC;}
  
  table tr       td             {padding:6px 8px;}
  table tr       td:first-child {border-left: 3px solid #fff;}
  table tr       td:last-child  {border-right:3px solid #fff;} 
  table tr:hover td:first-child {border-left: 3px solid #4EB2E2;}
  table tr:hover td:last-child  {border-right:3px solid #4EB2E2;}
  
  table tr td:nth-child(1){
    color:#fff;
    width: 33px;
    padding: 5px 0;
    text-align: center;
  }
  .statusRunning {
     background-color: #5AD427;
  }
  .statusQueued {
     background-color: #A4E786;
  }
  .statusIncomplete {
     background-color: #FFCC00;
  }
  table tr td:nth-child(2){
    text-align:left;
  }
  </code></pre>