Question

将2个单行表放在一起后，我得到了所需的结果：2个相邻的行没有相同的列宽。 http://jsfiddle.net/x2SQN/

    ---------------------
    |100px | 100% - 100px|
    ---------------------
    |  50%      |  50%   |
    ---------------------

我可以使用一个<table>来实现这一目标吗？ http://jsfiddle.net/x2SQN/

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

Answer 1

没有。在表格中，列从上到下保持一致。

您可以使用每个单元格的colspan，但这就是它。

e.g。如果你想要，你可以这样做。

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

但您将仅限于使用固定px尺寸或%尺寸的组合，例如您无法50% - 100px。

Answer 2

您可以使用假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>

Answer 3

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

主要思想是将您的表格转换为块模型设计，我们可以控制每个元素的宽度。我的解决方案的主要好处是，您可以使用CSS函数（如calc）为列提供响应宽度[如calc（100％ - 100px）]。但我的解决方案的主要缩小是在同一行中有不同的单元格高度的情况。幸运的是，可以使用虚拟列技术轻松修复。（我使用one-true-layout）

所以，经过所有这些，我们来看看解决方案:(其中一些是在CSS部分编写的，使用常规的CSS选择器而不是你要求的内联，因为它对我来说更容易。但是你可以将所有内容复制到正确的位置并使其全部内联）

Working Fiddle 经过测试： Chrome，IE10，FF

HTML （我添加了<tbody>，因此您可以应用inline-CSS样式）

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

CSS （所有样式都可以内嵌）

*
{
    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*/
}

列宽度不受其上方行控制

3 个答案: