最後のセルの前に境界線を削除します

Question

私は、3列と数行（サーバーからのデータで動的に追加）のブートストラップでスタイリングされたシンプルなテーブルを持っています。

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

私はそれが1列であるようにそれが見えるようにする列ValueとEdit間の境界線を削除します。

これは私が試したものです：それは実際に働いているが、私は!importantパラメータを使用したくない

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

。

!importantせずにこれを行う方法、あるいはこのように同じセル内の両方の情報を入れるための別の方法があります：セルの真ん中にValue情報、および右側のEdit情報？私はinlineようにそれを行うには良い方法があると確信している、

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

それがうまく機能している場合でも：編集

---

は私にあるwithout !important wayを与えるためにあなたAaronをありがとう方法。何か案は ？

Answer 1

スタイルを設定するには、クラスとタグを使用してタグの指定を高くすることができます。

ので、あなたのスタイルは次のようになります：

<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 =カスケーディングスタイルシート、 あなたはTwitterのブートストラップ前に、あなたの

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

をロードする場合、それはその「しない限り、上書きされます重要！ ' ブートストラップの読み込み後にスタイルをロードしようとすると上書きされません。

他のオプションはインラインCSSですか？同じセル内の情報を入れて

Answer 3

、あなたが途中でテキストを整列するために最初のspan要素にブートストラップの.text-センタークラスを使用することができ

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

を使用することができます。それが役に立てば幸い。