Question

我需要为标题列和正文中的表设置相同的大小。无法添加固定值，因为列数可以依赖（创建xslt以将xml转换为html）

这是一个很好的例子来阐明我的观点：

TabLayout.Tab memberTab = tabLayout.newTab();
memberTab.setText(R.string.tromb_tab1_title);
View v = new View(this);
v.setBackgroundColor(Color.RED);
memberTab.setCustomView(v);

预期结果：

    <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     |

Answer 1

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

＆＃13;

 
   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;
}

＆＃13;

 <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>

＆＃13;

修改

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

工作JSFIDDLE

编辑1

您可以使用＆＃34; vw＆＃34;。您需要做的就是将font-size: 10px; font-size: 2.5vw;添加到您的表格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>

多个表的列大小相同

2 个答案: