Таблица Border в HTML/CSS

Question

Я создаю таблицу в HTML и пытаюсь присвоить ячейкам границу. Вот как это выглядит.

Смотрите, что странные границы в 2-ой строке, последней ячейке. Это проблема, которую я испытываю.

<table class="info"> 
    <tbody> 
     <tr> 
      <td>Some text</td> 
      <td>Some text</td> 
      <td>Some text</td> 
      <td>Some text</td> 
     </tr> 
     <tr> 
      <td><span>0</span></td> 
      <td><span>0</span></td> 
      <td><span>0</span></td> 
      <td><span>0</span></td> 
     </tr> 
     <tr> 
      <td>Some text</td> 
      <td>Some text</td> 
      <td>Some text</td> 
      <td>Some text</td> 
     </tr> 
     <tr> 
      <td><span>0</span></td> 
      <td><span>0</span></td> 
      <td><span>0</span></td> 
      <td><span>0</span></td> 
     </tr> 
     <tr> 
      <td>Some text</td> 
      <td>Some text</td> 
     </tr> 
     <tr> 
      <td><span>0</span></td> 
      <td><span>0</span></td> 
     </tr> 
    </tbody> 
</table> 

Вот мой CSS ....

table.info { 
    width: 100%; 
    text-align: center; 
} 

table.info td { 
    background: #fff; 
    border: 2px solid #ccc; 
    text-align: center; 
} 

Что я делаю неправильно здесь?

UPDATE - Я проверил CSS наследуется, и я нашел это ...

table { 
    border-collapse:collapse; 
    border-spacing:0; 
} 

Answer 1

Может быть, это поможет:

(HTML)

<table class="info"> 
    <tbody> 
     <tr> 
      <td>Some text</td> 
      <td>Some text</td> 
      <td>Some text</td> 
      <td>Some text</td> 
     </tr> 
     <tr> 
      <td><span>0</span></td> 
      <td><span>0</span></td> 
      <td><span>0</span></td> 
      <td><span>0</span></td> 
     </tr> 
     <tr> 
      <td>Some text</td> 
      <td>Some text</td> 
      <td>Some text</td> 
      <td>Some text</td> 
     </tr> 
     <tr> 
      <td><span>0</span></td> 
      <td><span>0</span></td> 
      <td><span>0</span></td> 
      <td><span>0</span></td> 
     </tr> 
     <tr> 
      <td>Some text</td> 
      <td>Some text</td> 
      <td colspan="2" class="empty">&nbsp;</td> 
     </tr> 
     <tr> 
      <td><span>0</span></td> 
      <td><span>0</span></td> 
      <td colspan="2" class="empty">&nbsp;</td> 
     </tr> 
    </tbody> 

(CSS)

table.info { 
    width: 100%; 
    text-align: center; 
} 

table.info td { 
    background: #fff; 
    border: 2px solid #ccc; 
    text-align: center; 
} 

table.info .empty { 
    border:none; 
} 

Answer 2

Ваш HTML не является правильным. Либо у вас должно быть равное нет. TD в каждой строке, или вы можете сопоставить разметку, используя rowspan/colspan.

Answer 3

нормально, я его протестировал .. и он не работает на firefox .. но хром и т. Е. Позволяет использовать таблицы с разными номерами столбцов в каждой строке ..., как сказал @chinmayee, не правильно это делать , вызывают таблицы используются только для представления табличных данных .. я бы sugest вам изменить ваш HTML и использовать дивы с поплавком, чтобы получить эффект, который вы хотите ..

удачи

Answer 4

за последние 2 строки сделать ячейку с = 2..something Объединение столбцов, как это:

<tr> 
     <td><span>0</span></td> 
     <td><span>0</span></td> 
     <td colspan="2"></td> 
    </tr>