用百分比寬度嵌套表對齊

-1

這裏我嵌套了格式化表。每個錶行頭都有相同的嵌套表格列寬等寬。如果我添加了任何填充或邊距，表格單元格崩潰。如何使每個列以相同的寬度變化。用百分比寬度嵌套表對齊

這裏下面的代碼：

table { 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
td, 
 
th { 
 
    border: 1px solid #000; 
 
    padding: 0; 
 
}

<table> 
 
    <tr> 
 
    <th width="20%">Head1</th> 
 
    <th width="20%">Head2</th> 
 
    <th width="20%">Head3</th> 
 
    <th width="20%">Head1</th> 
 
    <th width="20%">Head2</th> 
 
    </tr> 
 
</table> 
 
<table> 
 
    <tr> 
 
    <td colspan="5"> 
 
     <table> 
 
     <tr> 
 
      <td>data1</td> 
 
      <td>data2</td> 
 
      <td>equa3</td> 
 
      <td>data2</td> 
 
      <td>equa3</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan=5 "><table> 
 
     <tr> 
 
     <td>data1</td> 
 
     <td>data2</td> 
 
     <td>equa3</td> 
 
     \t <td>data2</td> 
 
     <td>equa3</td> 
 
    </tr> 
 
    
 
    </table></td></tr> 
 
    </table></td> 
 
    </tr> 
 
    </table>

任何建議：

來源

2016-08-01 bala

你不需要嵌套表，嵌套表具有相同數目比主表中的列，所以你並不需要它。 –

感謝您的回覆。我想添加每個表格內容的一些文字內容。如果添加任何內容，表列的寬度將增加。我需要表格列的寬度相等。 – bala

主表中有5列，嵌套表中有5列。 **您不需要此嵌套表**，它具有與主表相同的列數。這就是我在第一條評論中所說的。 –

使用這種類型的結構爲什麼呢？因爲當更多的記錄，你的期望，那麼你需要滾動條。對那個時候你的表結構無法supports.I給出一個結構只需按照任何它的做工精細環境，但最後根據你的表結構是不可能的。

table,tr,th,td{ 
 
border:1px solid; 
 
    border-collapse:collapse; 
 
} 
 
.header{ 
 
position:relative; 
 
display:inline-block; 
 
width:calc(100% - 17px); 
 
width:-webkit-calc(100% - 17px); 
 
width:-moz-calc(100% - 17px); 
 
}

<div class="header"> 
 
<table width="100%"> 
 
    <tr height="25"> 
 
    <th width="20%">Head1</th> 
 
    <th width="20%">Head2</th> 
 
    <th width="20%">Head3</th> 
 
    <th width="20%">Head4</th> 
 
    <th width="20%">Head5</th> 
 
    </tr> 
 
</table> 
 
</div> 
 
<div style="width:100%; height:200px; overflow:auto;"> 
 
<table width="100%"> 
 
    <tr height="50"> 
 
    <td width="20%"> </td> 
 
    <td width="20%"> </td> 
 
    <td width="20%"> </td> 
 
    <td width="20%"> </td> 
 
    <td width="20%"> </td> 
 
    </tr> 
 
    <tr height="50"> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    </tr> 
 
    <tr height="50"> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    </tr> 
 
    <tr height="50"> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    </tr> 
 
    <tr height="50"> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    </tr> 
 
    <tr height="50"> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    </tr> 
 
</table> 
 
</div>

來源

2016-10-05 09:12:41

這是我需要的。謝謝 – bala

您需要在您的日場這樣兩個表將共享添加在CSS相同的寬度屬性。

td,th { border: 1px solid #000; padding: 0; width: 20%; }

來源

2016-10-04 07:17:16

用百分比寬度嵌套表對齊

回答

相關問題