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

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

У меня есть 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>

Ответы

Ответ 1

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

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

td {
    border: none;
}

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

Ответ 2

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

Ответ 3

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

.table1 {border=1px solid black;}

Ответ 4

<style type="text/css">
table {
  border:1px solid black;
}
</style>

Ответ 5

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

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

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

Ответ 6

Возможно, вы захотите попробовать: http://jsfiddle.net/QPKVX/

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

Ответ 7

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

table {
   border-spacing: 0px;
}

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

Ответ 8

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

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

td {
   paddding: 0;
}