it-swarm.com.ru

Удаление границы из ячеек таблицы

Я знаю, что это глупый вопрос, но я, кажется, совершенно забыл, как это сделать.

У меня есть HTML table, и я хочу удалить все границы вокруг всех ячеек, чтобы вокруг всей таблицы была только одна граница.

Мой код выглядит так:

<table border='1' width='500'>
  <tr><th><h1>Your Wheelbarrow</h1></th><tr>
    <th>Product</th>
    <th>Description</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
    <th>Delete</th>
  </tr>
22
user1278496

Просто сверните границы таблицы и удалите границы из ячеек таблицы (элементы td).

table {
    border: 1px solid #CCC;
    border-collapse: collapse;
}

td {
    border: none;
}

Без явной установки border-collapse кросс-браузерное удаление границ ячеек таблицы не гарантируется.

46
brezanac

Атрибут HTML для этой цели - rules=none (вставляется в тег table).

12
Jukka K. Korpela

Просто используйте вашу таблицу внутри div с классом (например, .table1) и не устанавливайте границы для этой таблицы в CSS. Затем используйте код CSS для этого класса. 

.table1 {border=1px solid black;}
3
perfectionist1
<style type="text/css">
table {
  border:1px solid black;
}
</style>
2
js1568

Возможно, вам просто нужно это правило CSS:

table {
   border-spacing: 0px;
}

http://jsfiddle.net/Bz3Jt/3/

2
gumkins

Измените объявление таблицы на:

<table style="border: 1px dashed; width: 500px;">

Вот пример в действии: http://jsfiddle.net/kc48k/

2
hjpotter92

Вы можете попробовать это: http://jsfiddle.net/QPKVX/

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

2
mikevoermans

Если ни одно из решений на этой странице не работает, и у вас возникла следующая проблема:

 enter image description here

Вы можете просто использовать этот фрагмент CSS:

td {
   padding: 0;
}
0
The Codesee