Объединить ячейки таблицы из разных таблиц

Question

Можно ли комбинировать ячейки из разных таблиц с помощью CSS?

div { 
    width:35px; 
} 
td { 
    border:1px solid #ccc; 
    display:inline-block; 
} 

<div> 
<table> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
     </tr> 
    </tbody> 
</table> 

<table> 
    <tbody> 
     <tr> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
     </tr> 
    </tbody> 
</table> 
</div> 

http://jsfiddle.net/m2rwatob/3/

Мне нужно удалить эти пустые пространства http://i.imgur.com/fLfZ1Sn.png

Answer 1

Это не представляется возможным. Наиболее вы можете сделать, это объединить ячейки разных строк, установив tr {display:inline;}

Смотрите обновленный скрипку: http://jsfiddle.net/m2rwatob/5/

Answer 2

Нет необходимости УСС лучше использовать cellspacing="0" в элементе таблицы.

<div> 
<table cellspacing="0"> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
     </tr> 
    </tbody> 
</table> 

<table cellspacing="0"> 
    <tbody> 
     <tr> 
      <td>4</td> 
      <td>5</td> 
      <td>6</td> 
     </tr> 
     <tr> 
      <td>7</td> 
      <td>8</td> 
      <td>9</td> 
     </tr> 
    </tbody> 
</table> 
</div> 

Answer 3

Вам не нужно комбинировать таблицы. пустые пространства между таблицами можно удалить с помощью следующего стиля CSS

table { 
    border-spacing: 0px; 
} 

Answer 4

Вы можете удалить пустое пространство следующим образом:

div { 
 
    width:35px; 
 
} 
 
td { 
 
    border:1px solid #ccc; 
 
    display:inline-block; 
 
}

<div> 
 
<table cellspacing="0"> 
 
    <tbody> 
 
     <tr> 
 
      <td>1</td><td>2</td><td>3</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
<table cellspacing="0"> 
 
    <tbody> 
 
     <tr> 
 
      <td>4</td><td>5</td><td>6</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
</div>

Надеюсь, что это поможет.