2016-09-22 71 views
1

我有以下的HTML表格佈局:我怎麼能相同的寬度爲TH在合併單元格TD TD [解決]

<table> 
    <thead> 
     <th>A</th> 
     <th>B</th> 
     <th>C</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td colspan="3"> 
       <tr> 
        <td rowspan="3">Name</td> 
        <td>foo</td> 
        <td>bar</td> 
       </tr> 
       <tr> 
        <td>1</td> 
        <td>2</td> 
       </tr> 
       <tr> 
        <td>1</td> 
        <td>2</td> 
       </tr> 
      </td> 
     </tr> 
    </tbody> 
</table> 

,我想這樣的佈局與jQuery的功能和代碼是在這裏: jQuery的

function createTable() { 
 
\t var mytable = $('<table></table>').appendTo('body'); 
 
\t 
 
\t var thead = $('<thead></thead>').appendTo(mytable); 
 
\t \t \t 
 
\t var row = $('<tr></tr>').appendTo(thead); 
 
\t 
 
\t for (var j = 0; j < 3; j++) { 
 
\t \t $('<th></th>').text(j).appendTo(row); 
 
\t } 
 
} 
 

 
function addName() { 
 

 
\t \t var CategoryRow = $('<tr></tr>').appendTo('table'); 
 
\t \t 
 
\t \t var col = $('<td></td>').attr({'colspan':3}).appendTo(CategoryRow); 
 
\t \t 
 
\t \t var row = $('<tr></tr>').appendTo(col); 
 
\t \t 
 
\t \t for (var j = 0; j < 3; j++) { 
 
\t \t \t $('<td></td>').text('a'+j).appendTo(row); 
 
\t \t } 
 
\t \t 
 
\t \t $(row).find('td:eq(0)').text('name'); 
 
\t \t 
 
} 
 

 

 

 
createTable(); 
 
addName();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

現在的概率是當我使用jQuery追加此La YOUT,表單元格寬度是在合併單元格的表格單元格不一樣的表格標題

注意如果我保存動態生成的表,然後運行佈局是好的。

感謝您的幫助和時間

解決

我已經解決了這個被替換TD> TBODY

+0

使用日合併單元格... – JoelBonetR

+0

1總是使用* *有效HTML(嵌套表)(儘管您的評論)2個使用合併單元格。 3在你的嵌套表中使用''來設置所有列寬相同 –

+0

謝謝@ freedomn -m你能提供一個html表格佈局嗎? –

回答

0

使用這個網站的代碼,我已經實現了我所需要的。
感謝所有幫助和時間

<table> 
<thead> 
    <th>A</th> 
    <th>B</th> 
    <th>C</th> 
</thead> 
<tbody> 
    <tr> 
     <td colspan="3"> 
      <tbody> 
       <td rowspan="3">Name</td> 
       <td>foo</td> 
       <td>bar</td> 
      </tbody> 
      <tbody> 
       <td>1</td> 
       <td>2</td> 
      </tbody> 
      <tbody> 
       <td>1</td> 
       <td>2</td> 
      </tbody> 
     </td> 
    </tr> 
</tbody> 
</table>