Css 列宽不受其上方行的控制

将两个一行表放在一起，我得到了期望的结果：两个相邻的行没有相同的列宽

我可以用一个

来实现这一点吗？

---

基本上，我不能使用javascript或不使用内嵌css。

否。在一个表中，列自上而下保持一致

您可以随意使用每个单元格的

colspan

s，仅此而已

e、 如果你愿意，你可以这样做

<table>
  <tr>
    <td width="20%">20%</td>
    <td width="30%">30%</td>
    <td width="50%">50%</td>
  </tr>
  <tr>
    <td width="50%" colspan="2">50%</td>
    <td width="50%">50%</td>
  </tr>
</table>

20%
30%
50%
50%
50%

---

但是，您将被限制使用固定的

px

大小或

%

大小的组合，例如，您不能使用

50%-100px

。

您可以使用假colspan值。将其视为百分比以保持简单

<table border="0" cellspacing="6" width="400">
    <tr>
        <td colspan="30" style="background-color:red;" />
        <td colspan="70" style="background-color:yellow;"/>
    </tr>

    <tr>
        <td colspan="70"  style="background-color:black;" />
        <td colspan="30"  style="background-color:pink;" />
    </tr>
</table>

---

通常，我们将块元素转换为表格模型，以实现“类似表格”的显示，现在，作为问题的解决方案：我发现自己的做法正好相反

其主要思想是将表格转换为块模型设计，我们可以控制每个元素的宽度。 我的解决方案的主要好处是，您可以使用CSS函数（如calc）为列提供响应宽度[如calc（100%-100px）]。 但我的解决方案的主要缩减是在同一行中有不同单元格高度的情况。 幸运的是，这可以很容易地用人造柱技术修复。（我用过）

所以，在说了这么多之后，让我们看看解决方案：（其中一些是在CSS部分编写的，使用常规CSS选择器，而不是按照您的要求内联，因为这对我来说更容易。但是您可以将过去的所有内容复制到正确的位置，并使其全部内联）

测试日期：铬、IE10、FF

HTML（我添加了

，这样您就可以应用内联CSS样式了）

---

为什么不能使用内联CSS？可以更改DOM吗？你能在文档中使用

标记吗？浏览器兼容性如何？这是一个有趣的想法，但我认为这不会提供“真实”的大小（除非每个单元格都填充了精确大小的块元素），例如，我试着将我们的两个想法混合在一起：但是你的想法将支持非常灵活的内容；-）

<table border="0" cellspacing="6" width="400">
    <tr>
        <td colspan="30" style="background-color:red;" />
        <td colspan="70" style="background-color:yellow;"/>
    </tr>

    <tr>
        <td colspan="70"  style="background-color:black;" />
        <td colspan="30"  style="background-color:pink;" />
    </tr>
</table>

<table>
    <tbody>
        <tr>
            <td style="background-color:red; width: 100px;">100px</td>
            <td style="background-color:yellow; width: calc(100% - 100px);">100% - 100px<br/>another line to demonstrate <i>faux column</i></td>
        </tr>
        <tr>
            <td style="background-color:azure; width:50%;">50%</td>
            <td style="background-color:pink; width:50%;">50%</td>
        </tr>
    </tbody>
</table>

*
{
    margin: 0;
    padding: 0;
}
table, tbody, tr
{
    display: block;
}
tr
{
    overflow: hidden; /*Faux column*/
}
td
{
    float: left;
    padding-bottom: 99999px; /*Faux column*/
    margin-bottom: -99999px; /*Faux column*/
}