Wie verschieben Sie Elemente Links und rechts in eine html-Tabelle mit css? -

Habe ich 6 <td>s in meinem <tr>s und ich möchte die letzten 3 in jeder Zeile alle näher zusammen. Wie kann ich diese verschieben?

Hier ist mein 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> 

Hier ist mein 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;
}
es sind 18 <td> - Elemente in Ihre Tabelle, und es sind 6 pro Zeile. Was meinst du, wenn Sie sagen, Sie wollen die letzten 3 "eng zusammen" ?

InformationsquelleAutor MattCamp | 2013-12-06

Schreibe einen Kommentar