Таблица thead, равная tbody с использованием jquery. Как это сделать?

Question

У меня есть таблицы что-то вроде этого:

.table { 
 
    width: 300px; 
 
} 
 
thead, tbody { 
 
    display: block; 
 
    table-layout: fixed; 
 
} 
 
tr { 
 
    width: 100%; 
 
} 
 
th { 
 
    border: 1px solid #454545; 
 
    color: #545454; 
 
    background-color: #e4e4e4; 
 
    padding: 2px 6px; 
 
    table-layout: fixed; 
 
} 
 
td { 
 
    border: 1px solid #454545; 
 
    color: #454545; 
 
    padding: 2px 6px; 
 
    background-color: #eeeeee; 
 
    table-layout: fixed; 
 
}

<table cellspacing="0" class="table"> 
 
    <thead> 
 
    <tr> 
 
     <th rowspan="2">test1</th> 
 
     <th colspan="2">test2</th> 
 
     <th rowspan="2">test3</th> 
 
    </tr> 
 
    <tr> 
 
     <th>test4</th> 
 
     <th>test5</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Я хочу сделать:

• тд - 1 и 2, равный-й - test1
• TD - 3, равный th - test4
• td - 4 равно th - test5
• тд - 5 и 6 равна й - test3

Я ищу решение JQuery, но может быть, это не нужно.

Подробнее: TBODY и THEAD должен быть с дисплеем: блок, потому что TBODY будет в будущем с переливом-у прокручивать.

Answer 1

Вы можете выравнивать ширину cols только с использованием атрибутов html.

<p>Bad value for colspan , minor than cols numbers </p> 
 
<table border="1"> 
 
    <thead> 
 
    <tr> 
 
     <td colspan="2">1 col</td> 
 
     <td colspan="5">5 col</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1 col</td> 
 
     <td>2 col</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<br> 
 
<p>Correct value</p> 
 
<table border="1"> 
 
    <thead> 
 
    <tr> 
 
     <td colspan="2">1 col</td> 
 
     <td colspan="5">5 col</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1 col</td> 
 
     <td>2 col</td> 
 
     <td>3 col</td> 
 
     <td>4 col</td> 
 
     <td>5 col</td> 
 
     <td>6 col</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<br> 
 
<p>Table inside table, width auto</p> 
 
<table border="1"> 
 
    <thead> 
 
    <tr> 
 
     <td colspan="2">1 col</td> 
 
     <td colspan="5"> 
 
     <table border="1"> 
 
      <tr> 
 
       <td colspan="2"> 5 cols Title header</td> 
 
      </tr> 
 
      <tr> 
 
       <td> hcol1 </td> 
 
       <td> hcol2 </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1 col</td> 
 
     <td>2 col</td> 
 
     <td>3 col</td> 
 
     <td>4 col</td> 
 
     <td>5 col</td> 
 
     <td>6 col</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<br> 
 
<p>Table inside table, width 100% </p> 
 
<table border="1"> 
 
    <thead> 
 
    <tr> 
 
     <td colspan="2">1 col</td> 
 
     <td colspan="5"> 
 
     <table border="1" style="width:100%"> 
 
      <tr> 
 
       <td colspan="2"> 5 cols Title header</td> 
 
      </tr> 
 
      <tr> 
 
       <td> hcol1 </td> 
 
       <td> hcol2 </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1 col</td> 
 
     <td>2 col</td> 
 
     <td>3 col</td> 
 
     <td>4 col</td> 
 
     <td>5 col</td> 
 
     <td>6 col</td> 
 
    </tr> 
 
    </tbody> 
 
</table><br><br><br><br><br><br>

Но если вы хотите сделать это с Jquery вам нужно установить некоторый атрибут или вар для знать, какие Col нужно больше Colspan размера. Пишите меньше делать больше, здесь нет возможности.

Похоже, вы хотите создать сетку с таблицами, плохую идею. Если это так, советую вам использовать, например, Bootstrap.

Если нет, вы можете установить атрибут для каждого тега td, например, «group-td» и другого атрибута с тегом заголовка th. Затем выберите tbody td и создайте группы элементов по значению group-td, получите ширину ссылки и разделите ширину или высоту. Но у вас всегда будут проблемы с прокладками и границами.

Answer 2

Это просто. Просто используйте HTML colspans в первой строке заголовка:

<tr> 
     <th rowspan="2" colspan="2">test1</th> 
     <th colspan="2">test2</th> 
     <th rowspan="2" colspan="2">test3</th> 
    </tr> 

Answer 3

Если вы так особенно об использовании JQuery, попробуйте следующее:

$(document).ready(function(){ 
var x = $(".table thead tr th"); 
$(x[0]).attr("colspan","2"); 
$(x[2]).attr("colspan","2") 
});