多个表的列大小相同

Question

我需要 header 列和 body 内的 table 具有相同的大小。无法添加固定值，因为列的数量可能取决于（创建 xslt 以将 xml 转换为 html）

这是一个小例子来说明我的观点：

    <html>
     <table border="2px">
      <thead>
       <tr>
        <td>Name</td>
        <td>Firstname</td>
       </tr>
      </thead>
      <tbody>
       <table border="2px">
        <tr>
         <td>Vertongen</td>
         <td>Marc</td>
        </tr>
       </table>        
      </tbody>
    </table> 
   </html>

预期结果：

Name     |Firstname|
Vertongen|Marc     |

实际结果：

Name|Firstname|
Vertongen|Marc|

Answer 1

你可以使用CSS FluidColumn，你说你不能使用固定宽度因为你想扩展到更多列，所以我添加了额外的列，

 
   table {
table-layout: fixed;
width: 100%;
 min-width: 500px;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
td {
  overflow: hidden;
  white-space: nowrap;
}

 <table border="2px">
      <thead>
       <tr class="ha">
        <td>Name Name Name Name Name</td>
        <td>Firstname</td>
         <td>Name1</td>
        <td>Firstname1</td>
       </tr>
      </thead>
      <tbody>
       <table border="2px">
        <tr >
         <td>Vertongen</td>
         <td>Marc</td>
         <td>Vertongen1</td>
         <td>Marc1</td>
        </tr>
        
       
         </table>      
      </tbody>
    </table>

编辑

现在你可以添加任何长度，但是当你展开table时，你可以看到隐藏的内容too.Which意味着如果列中的文本比宽度大，它永远不会覆盖其他列。

工作JSFIDDLE

编辑 1

您可以使用 "vw"。您所要做的就是将 font-size: 10px; font-size: 2.5vw; 添加到您的 table css 中。它们是与设置视口宽度相关联的单位。

工作JSFIDDLE

Answer 2

我编辑了肯尼的回答：

 <table border="2px">
  <thead>
   <tr>
    <td>Name</td>
    <td>Firstname</td>
   </tr>
  </thead>
  <tbody>
   <table border="2px">
    <tr>
     <td>Vertongen</td>
     <td>Marc</td>
    </tr>
   </table>        
  </tbody>
</table>
<style>
table {
table-layout: fixed;
}   
</style>

多个表的列大小相同

Same column size for multiple tables

html

xslt

html-table

column-width