2011-10-20 2 views
0

Colspan тот же, но не выглядит одинаково, когда я запускаю программу и просматриваю ее в браузере, почему? Один из них немного длиннее другого. Информация о родителях/опекунах больше, чем информация для студентов. Спасибо за вашу помощьColspan те же, но не выглядят одинаково в браузере

<td class="tblHead" colspan="6">Student Information</td> 

<td class="tblHead" colspan="6"> Parent/Guardian Information</td> 



    <asp:Panel ID="panelADD" runat="server"> 
    <table style="width:100%; text-align:left;"> 
    <tr> 
     <td class="tblHead" colspan="6">Student Information<uc2:PopupCertify ID="ucPopupCertify"  runat="server" /> 
     </td> 
    </tr> 
    <tr> 
    <td> &nbsp;</td> 
    </tr> 



<table style="width:100%; text-align:left;"> 
     <tr> 
     <td class="tblHead" colspan="6"> Parent/Guardian Information</td> 
    </tr> 
    <tr> 
+0

Не могу сказать без полного HTML. Можете ли вы опубликовать jsfiddle? –

+0

Вам придется показать больше, чем это, возможно, снимок экрана о том, как он появляется. –

+0

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

ответ

1

Colspan не устанавливает ширину. Он просто говорит, что эта ячейка охватывает X количество столбцов. Таким образом, в вашем случае вы создаете одну ячейку, которая охватывает 6 столбцов. Так как ширина столбцов может быть различной, ширина ячеек будет различной.

Поскольку в настоящее время существует только одна строка с одной ячейкой в ​​этой строке (которая охватывает 6 столбцов), ширина ячейки будет такого же размера, как и ее содержимое. Итак, поскольку текст «Информация о родителях/опекунах» длиннее, чем «Информация для учеников», его ячейка будет более длинной для ее размещения.

Для того, чтобы эти клетки того же размера, вы должны обновить CSS tblHead класса включать ширина:

<style> 
.tblHead { 
    width: 350px; 
    /* Your other style information */ 
} 
</style> 
Смежные вопросы