Таблица Ячейки с различной шириной в разных строках

Question

Я слабый в CSS, и я пытаюсь разместить таблицу на моей странице html, у нее есть две строки и пять столбцов на строку (конечно, это упрощено), и это должно выглядеть следующим образом (таблица представляет собой таблицу, ручной рисунок, он не приходит настолько точно, I`m извините за это.):

Но мое выглядит следующим образом:

Это мой код:

<table border="1"> 
    <tr> 
     <td style="width:50px" colspan="2">&nbsp;</td> 
     <td style="width:50px" colspan="2">&nbsp;</td> 
     <td style="width:50px" colspan="2">&nbsp;</td> 
     <td style="width:50px" colspan="2">&nbsp;</td> 
     <td style="width:25px">&nbsp;</td> 
    </tr> 
    <tr> 
     <td style="width:25px">&nbsp;</td> 
     <td style="width:50px" colspan="2">&nbsp;</td> 
     <td style="width:50px" colspan="2">&nbsp;</td> 
     <td style="width:50px" colspan="2">&nbsp;</td> 
     <td style="width:50px" colspan="2">&nbsp;</td> 
    </tr> 
</table> 

Код в jsfiddle: here.

ПРИМЕЧАНИЕ. Любые стили могут быть добавлены, но структура таблицы не может быть изменена.

Моя проблема заключается не в стиле рамки таблицы, а в ширине ячеек, кажется, что ячейки имеют беспорядочную ширину, я надеюсь, что правая граница первой ячейки во второй строке может достигать середины нижней границы первой ячейки в первой строке, а правая граница первой ячейки в первой строке может достигать середины верхней границы второй ячейки во второй строке, так же как и другие.

Я старался изо всех сил, но он все еще не работает. Как я могу выполнить это требование? Любое предложение будет оценено по достоинству. Заранее спасибо.

Answer 1

Вы можете использовать <colgroup> элемент для достижения этой цели:

<table border="1"> 
    <colgroup> 
     <col style="width: 25px"/> 
     <col style="width: 25px"/> 
     <col style="width: 25px"/> 
     <col style="width: 25px"/> 
     <col style="width: 25px"/> 
     <col style="width: 25px"/> 
     <col style="width: 25px"/> 
     <col style="width: 25px"/> 
     <col style="width: 25px"/> 
    </colgroup> 
    <tr> 
     <td colspan="2">&nbsp;</td> 
     <td colspan="2">&nbsp;</td> 
     <td colspan="2">&nbsp;</td> 
     <td colspan="2">&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td colspan="2">&nbsp;</td> 
     <td colspan="2">&nbsp;</td> 
     <td colspan="2">&nbsp;</td> 
     <td colspan="2">&nbsp;</td> 
    </tr> 
</table> 

Он покажет таблицу, что есть 9 столбцов и каждая строка будет охватывать столбцы как вы изначально имели.

---

Есть и другие, не связанные с таблицей способы добиться того, что вы ищете. Вот один простой пример:

<div> 
    <div class="row"> 
     <div>&nbsp;</div> 
     <div>&nbsp;</div> 
     <div>&nbsp;</div> 
     <div>&nbsp;</div> 
     <div>&nbsp;</div> 
    </div> 
    <div class="row"> 
     <div>&nbsp;</div> 
     <div>&nbsp;</div> 
     <div>&nbsp;</div> 
     <div>&nbsp;</div> 
     <div>&nbsp;</div> 
    </div> 
</div> 

div.row 
{ 
    clear:both; 
} 
div div div 
{ 
    width: 50px; 
    border-width: 1px; 
    border-style: solid; 
    border-color: black; 
    display: inline-block; 
    float: left; 
    margin: -1px; 
} 

div div:nth-child(2n+1) div:first-child, 
div div:nth-child(2n) div:last-child 
{ 
    width: 25px; 
} 

Answer 2

Используйте таблицы в таблицах ..

 <table> 
     <tr> 
     <td> 
      <table border="1"> 
       <tr> 
       <td style="width:50px">&nbsp;</td> 
       <td style="width:50px">&nbsp;</td> 
       <td style="width:50px">&nbsp;</td> 
       <td style="width:50px">&nbsp;</td> 
       <td style="width:25px">&nbsp;</td> 
       </tr> 
      </table> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <table border="1"> 
      <tr> 
       <td style="width:25px">&nbsp;</td> 
       <td style="width:50px">&nbsp;</td> 
       <td style="width:50px">&nbsp;</td> 
       <td style="width:50px">&nbsp;</td> 
       <td style="width:50px">&nbsp;</td> 
      </tr> 
      </table> 
     </td> 
     </tr> 
    </table> 

Таким образом, вы никогда не будете иметь эту проблему ...

Answer 3

Для этого, чтобы работать, вы должны иметь по крайней мере одну строку, которая определяет ширину отдельные клетки (те, которые не используют cellspan ы):

http://jsfiddle.net/cR2qd/7/1

HTML:

<body> 
<table border="1"> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td colspan="2">&nbsp;</td> 
     <td colspan="2">&nbsp;</td> 
     <td colspan="2">&nbsp;</td> 
     <td colspan="2">&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td colspan="2">&nbsp;</td> 
     <td colspan="2">&nbsp;</td> 
     <td colspan="2">&nbsp;</td> 
     <td colspan="2">&nbsp;</td> 
    </tr> 
</table> 
</body> 

CSS:

td { 
    width: 25px; 
}