Граница таблицы в HTML / CSS - PullRequest
Новая
       29

Граница таблицы в HTML / CSS

0 голосов
/ 08 ноября 2010

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

alt text

См. Эту странную границу во 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;
}

Что я здесь не так делаю?

ОБНОВЛЕНИЕ - я проверилcss наследуется, и я нашел это ... 

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

Ответы [ 4 ]

7 голосов
/ 08 ноября 2010

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

2 голосов
/ 08 ноября 2010

для последних 2 строк сделать ячейку с colspan = 2. примерно так: 

<tr>
      <td><span>0</span></td>
      <td><span>0</span></td>
      <td colspan="2"></td>
  </tr>
1 голос
/ 08 ноября 2010

Возможно, это поможет:

(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;
}
1 голос
/ 08 ноября 2010

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

удачи

...