Entfernen der Grenze vor der letzten Zelle

Question

Ich habe eine einfache Tabelle, bootstrap formatiert, mit 3 Spalten und ein paar Zeilen (dynamisch mit Daten vom Server hinzugefügt).

<table class="table table-bordered"> 
    <tr> 
     <th>Data</th> 
     <th>Value</th> 
     <th><!-- Should be 'Edit' but I'm hiding it--></th> 
    </tr> 
    <tr> 
     <td>data</td> 
     <td>value</td> 
     <td width="70px"><a href="/link/to/edit/value">Edit</a></td> 
    </tr> 
</table> 

Ich mag die Grenze zwischen den Spalten Value und Edit entfernen, um es sieht aus wie es eine Spalte ist.

Dies ist, was ich versucht habe:

<style> 
    th:last-child, td:last-child { 
     border-left: none !important; 
    } 
    th:nth-last-child(2), td:nth-last-child(2) { 
     border-right:none !important; 
    } 
</style> 

Es ist tatsächlich funktioniert, aber ich will nicht die !important Parameter verwenden.

Gibt es eine Möglichkeit, dies zu tun, ohne !important oder eine andere Art und Weise sowohl Informationen in der gleichen Zelle wie folgt zu setzen: Value Info in der Mitte der Zelle und Edit Informationen auf dem rechten Seite?

---

bearbeiten
Danke Aaron für mir die without !important way geben, das ist:

<style> 
    body table.table.table-bordered tr th:last-child, 
    body table.table.table-bordered tr td:last-child { 
     border-left: none; 
    } 

    body table.table.table-bordered tr th:nth-last-child(2), 
    body table.table.table-bordered tr td:nth-last-child(2) { 
     border-right: none; 
    } 
</style> 

Auch wenn es gut funktioniert, ich bin sicher, dass es ein besserer Weg ist es wie ein inline zu tun Weg. Irgendwelche Ideen ?

Answer 1

Um einen Stilsatz zu erstellen, können Sie die Tag-Spezifität erhöhen, indem Sie die Klassen und Tags verwenden.

so Ihren Stil wie diese werden wird:

<style> 
    body table.table.table-bordered tr th:last-child, td:last-child { 
     border-left: none; 
    } 
    body table.table.table-bordered tr th:nth-last-child(2), 
    body table.table.table-bordered tr td:nth-last-child(2) { 
     border-right:none; 
    } 
</style> 

Answer 2

Css = Cascading Style Sheets, , wenn Sie Ihr laden

th:last-child, td:last-child { 
    border-left: none !important; 
} 

vor dem Twitter Bootstrap, wird es überschrieben, es sei denn seine ‚wichtig! ' versuchen Sie Ihren Stil nach dem Bootstrap laden und es sollte nicht überschrieben werden - nicht mehr! Wichtig!

Ihre einzige andere Option wäre inline css?

Answer 3

die Informationen in der gleichen Zelle zu setzen, Sie

<tr> 
    <th>Data</th> 
    <th>Value | Edit</th> 

</tr> 
<tr> 
    <td>data</td> 
    <td width="70px"> 
     <span style="float:left;width:50%;">this is the left</span> 
     <span style="float:right;width:50%:">this is right</span> 
    </td> 
</tr> 

Sie verwenden, um die Bootstrap-.text-Center-Klasse im ersten span-Elemente verwenden könnten den Text in der Mitte auszurichten. Ich hoffe es hilft.