Search code examples
htmlcsshtml-tablealignment

How to move items left and right in an html table using css? -


I have 6 <td>s in my <tr>s and I want the last 3 in each row to all be closer together. How can I move them?

Here is my html:

<p> Test.com Funtown <div><a href="#">Click Here</a></div> </p>
  <table>
    <tbody>
      <tr>
        <td class="statusRunning">R</td>
        <td>My First Try</td>
        <td>100 / 250 plays</td>
        <td><a href="#">Players</a></td>
        <td><a href="#">Duplicate</a></td>
        <td><a href="#">Archive</a></td>
      </tr>
      <tr>
        <td class="statusQueued">1</td>
        <td>The best try</td>
        <td>0 / 250 plays</td>
        <td><a href="#">Players</a></td>
        <td><a href="#">Duplicate</a></td>
        <td><a href="#">Archive</a></td>
      </tr>
      <tr>
        <td class="statusIncomplete"> </td>
        <td>Could be better</td>
        <td>0 / 50 plays</td>
        <td><a href="#">Players</a></td>
        <td><a href="#">Duplicate</a></td>
        <td><a href="#">Archive</a></td>
      </tr>
    </tbody>
  </table> 

Here is my css:

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;
}

Solution

  • I would just put them all into the same <td> and add margin/padding to the <a> element inside the <td>then you could add whatever number of links you want in there.

    here is a fiddle below. http://jsfiddle.net/D7sTY/

    Html

      <tr>
        <td class="statusRunning">R</td>
        <td>My First Try</td>
        <td>100 / 250 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Duplicate</a><a href="#">Archive</a></td>
      </tr>
    

    CSS

    .tightcell a
    {
        margin: 0 2px;    
    }