Столбцы таблицы не равны

Question

У меня есть следующая таблица. Я использую colspan="4" для 2 td - но они не равны. Первый столбец больше второго. Что из-за этого?

<table border="0" cellpadding="0" cellspacing="0">   
 
      <tr><td colspan="8" style="height:10px;">&nbsp;</td></tr> 
 
      <tr><td colspan="8" style="height:10px;">&nbsp;</td></tr> 
 
    <tr> 
 
       <td style="position: relative; font-size: 14px;" colspan="8"> 
 
       text 
 
       </td> 
 
    </tr> 
 
    
 
    <tr><td colspan="8">&nbsp;</td></tr> 
 
      <tr> 
 
       <td colspan="4"> 
 
        To: 
 
       </td> 
 
       <td colspan="4"> 
 
        From: 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td colspan="4"> 
 
        text<br> 
 
        text<br> 
 
        text<br> 
 
        text 
 
       </td> 
 
       <td colspan="4"> 
 
        text<br> 
 
        text<br> 
 
        text<br> 
 
        text 
 
       </td> 
 
      </tr> 
 
    //in the same way other rows 
 
    </table>

Он выглядит таким образом:

Answer 1

Не совсем уверен, что вы имели в виду, но я дал ему шанс. Я добавил colgroup, чтобы более четко показать разницу, и заменил устаревшие атрибуты border="0" cellpadding="0" cellspacing="0" HTML5.

table { 
 
    border: 0; 
 
    border-spacing: 0; 
 
    border-collapse: collapse; 
 
    table-layout: fixed; 
 
    width: 100px; /*Needs to be greater than the size of 'From:'*/ 
 
} 
 
td { 
 
    padding: 0; 
 
}

<table> 
 
    <colgroup> 
 
    <col span="4" style="background-color:red"> 
 
    <col span="4" style="background-color:yellow"> 
 
    </colgroup> 
 
    <tr> 
 
    <td colspan="8" style="height:10px;">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="8" style="height:10px;">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td style="position: relative; font-size: 14px;" colspan="8"> 
 
     text 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td colspan="8">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="4"> 
 
     To: 
 
    </td> 
 
    <td colspan="4"> 
 
     From: 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="4"> 
 
     text 
 
     <br>text 
 
     <br>text 
 
     <br>text 
 
    </td> 
 
    <td colspan="4"> 
 
     text 
 
     <br>text 
 
     <br>text 
 
     <br>text 
 
    </td> 
 
    </tr> 
 
</table>

Хотя, глядя на ваше изображение, следующая структура будет более подходящим:

table { 
 
    border: 0; 
 
    border-spacing: 0; 
 
    border-collapse: collapse; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    /*Needs to be greater than the size of 'From:'*/ 
 
} 
 
td { 
 
    padding: 0; 
 
} 
 
caption { 
 
    color: #002B7F; 
 
    font-weight: bold; 
 
} 
 
caption, 
 
th { 
 
    text-align: left; 
 
} 
 
thead { 
 
    background-color: #007C66; 
 
    color: white; 
 
}

<table> 
 
    <caption>text</caption> 
 
    <thead> 
 
    <th>To:</th> 
 
    <th>From:</th> 
 
    </thead> 
 
    <tr> 
 
    <td>text</td> 
 
    <td>text</td> 
 
    </tr> 
 
    <tr> 
 
    <td>text</td> 
 
    <td>text</td> 
 
    </tr> 
 
    <tr> 
 
    <td>text</td> 
 
    <td>text</td> 
 
    </tr> 
 
    <tr> 
 
    <td>text</td> 
 
    <td>text</td> 
 
    </tr> 
 
    <tr> 
 
    <td>text</td> 
 
    <td>text</td> 
 
    </tr> 
 
    <tr> 
 
    <td>text</td> 
 
    <td>text</td> 
 
    </tr> 
 
    <tr> 
 
    <td>text</td> 
 
    <td>text</td> 
 
    </tr> 
 
</table>