多个表的列大小相同答案

【问题标题】：Same column size for multiple tables多个表的列大小相同
【发布时间】：2016-07-05 08:29:44
【问题描述】：

我需要标题列和正文中的表格具有相同的大小。无法添加固定值，因为列的数量可以依赖（创建 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|

【问题讨论】：

那么为什么table 嵌套在tbody 中？如果您只是在其中有 tr 元素，那么列应该没问题。
这其实是为了解决另一个问题。分页符:) ...我们必须能够将第二个表保持在一起，而无需分隔行。这只是我们要完成的任务的简单表示！
@Kenny 我再次编辑了答案，希望对您有所帮助。检查一下。

标签： html xslt html-table column-width

【解决方案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>

编辑

现在你可以添加任何长度，但是当你展开表格时，你也可以查看隐藏的内容。这意味着如果一列中的文本大于宽度，它永远不会覆盖另一列。

工作JSFIDDLE

编辑 1

您可以使用“大众”。您只需将font-size: 10px; font-size: 2.5vw; 添加到您的表格css 中即可。它们是与设置视口宽度相关的单位。

工作JSFIDDLE

【讨论】：

感谢您的回答，但如上所述，我们不能使用固定宽度。
感谢您的编辑。我们现在遇到的问题是，如果列中的文本大于宽度，它会覆盖另一列。
@Kenny 我再次编辑了答案，希望对您有所帮助
感谢您的回答，它有效 :) 我还需要一件事，如果我们分配了列，字体的大小应该可以缩放。是否可以动态地执行此操作，还是我们需要为此实现某种逻辑？
@Kenny 你的意思是动态改变字体大小。你可以使用“vw”。您只需将font-size: 10px; font-size: 2.5vw; 添加到您的表格css 中即可。它们是与设置视口宽度相关的单位。工作小提琴-jsfiddle.net/eauthv3u

【解决方案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>

【讨论】：