你可以混合％和px来对齐表吗？

问题描述

我尝试使用不同数量的列来对齐不同的表，所以前两列是对齐的，其余的是独立对齐的，但使用％很难，当调整窗口大小时会失去对齐。

I am trying to align different tables with different amount of columns so the first two columns are align and the rest are independently align but using % it is very difficult and when resizing window it losses alignment.

这就是为什么我试图在td上与％和px对齐。

That is why I was trying to align mixing with % and px on td, ex.

<table>
  <tr>
    <td width="100px"></td>
    <td width="100px"></td>
    <td width="50%"></td>
    <td width="20%"></td>
 </tr>
</table>
<table>
 <tr>
   <td width="100px"></td>
   <td width="100px"></td>
   <td width="70%"></td>
 </tr>
</table>

但是看起来并不合逻辑，似乎不起作用。

But As does not look logical it does not seem to work.

有什么办法让这个工作或替代方案？

Is there any way to get this working or an alternative?

推荐答案

colspan属性来做到这一点。设计表格以使得存在离散的行和列，其中表中的列数等于任何行中的TD元素的最大数目+这些单元格跨越的列数（默认为1）。因此，您需要找出表中列的一些基本单位，然后将单元格设置为该基数的倍数。

You will have to use the colspan attribute to do this. Tables are designed such that there are discrete rows and columns, where the number of columns in a table is equal to the largest number of TD elements in any row + the number of columns those cells span (default of 1). So, you need to figure out some base unit for a column in your table, and then have the cells be multiples of that base.

需要记住的是，在其中指定的列数较少的列（单个TD列和跨越多于1列的TD）将填充尽可能多的列，从左到右（除非在CSS中指定了rtl文本），因此您可以不同列数的行，因为TD单元格不能溢出它的列，除非设置colspan属性（换句话说，TD必须占用整数列，而不是部分列）

One thing to remember is that any row that has fewer columns specified in it (both single TD columns and TDs that span more than 1 column) will fill in as many columns as it can, left to right (unless rtl text is specified in the CSS), so you can have rows of differing numbers of columns, because a TD cell cannot spill out of it's column unless a colspan attribute is set (in other words, a TD has to occupy an integer number of columns, not partial columns)

编辑：
只能使用我在处理只有1个表时所描述的方法。要对齐2个表，请将它们都包含在父元素（DIV）中，然后将这两个表的宽度设置为100％。然后你可以控制div的宽度，这将使表里面使用所有可用空间。然后问题就变成了一个，你只需要确保表以相同的方式填充空间，这是更容易，因为它是更受控制。

You can only use the method I have described when you are dealing with only 1 table. To align 2 tables, wrap them both in a parent element (DIV), and then give both tables a width of 100%. You can then control the width of the div, which will make the tables inside use all available space. The problem then becomes one where you just have to make sure the tables fill up the space in the same way, which is easier because it is more controlled.

这篇关于你可以混合％和px来对齐表吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！