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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich würde legte Sie alle in die gleiche
<td>
und fügen Sie margin/padding zu den<a>
element innerhalb der<td>
dann könnte man hinzufügen, was die Anzahl der links, die Sie wollen.hier ist ein Turnschuh unten.
http://jsfiddle.net/D7sTY/
Html
CSS
InformationsquelleAutor Dylan Hayes
Ziel Sie separat mit CSS zu entfernen/verringern Sie die Polsterung.
http://jsfiddle.net/G4Dw5/2/
Ich komplett entfernt, die Polsterung auf Sie, möchten Sie vielleicht, um ein paar Pixel aber.
InformationsquelleAutor HaukurHaf
nth-child(n+4)
so (fiddle):Hier ist eine Vorschau:
InformationsquelleAutor canon
Set id atribute von HTML-Steuerelement, um die css-Klasse in Ihrem .css-Datei
und fügen Sie folgenden code in Ihre .css-Datei
InformationsquelleAutor Ravi Wadje