Удалить границу до последней ячейки

Question

У меня есть простая таблица в стиле бутстрапа с тремя столбцами и несколькими строками (динамически добавляется с данными с сервера).

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

Я хочу, чтобы удалить границу между столбцами Value и Edit сделать это выглядит как будто это один столбец.

Это то, что я пробовал:

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

Есть ли способ сделать это без !important, или другого способа поместить информацию как в той же камере, как это: Value информации в середине клетки, и Edit информации о праве?

---

Редактировать
Спасибо Aaron за предоставленную мне without !important way, который:

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

Даже если он хорошо работает, я уверен, что есть лучший способ сделать это, как inline путь. Есть идеи ?

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 = стиль каскадных листов, если вы загрузили

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

перед твиттер бутстрапе, он получает перезаписаны, если только его «важно! ' попробуйте загрузить свой стиль после загрузки bootstrap, и его не следует перезаписывать - не более! Важно!

Ваш единственный другой вариант был бы встроенным css?

Answer 3

поместить информацию в той же камере, вы можете использовать

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

вы можете использовать класс начальной загрузки .text-центра в первом элементе диапазона, чтобы выровнять текст в середине. Надеюсь, поможет.