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