0

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

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

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

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

4

3 回答 3

1

不会。在表格中，列从上到下保持一致。

您可以玩弄colspan每个单元格的 s ，仅此而已。

例如，如果你愿意，你可以这样做。

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

于 2013-09-16T15:52:24.090 回答
0

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

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

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

工作小提琴 测试： Chrome，IE10，FF

HTML（我添加了，<tbody>因此您可以应用内联 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*/
}
于 2013-09-16T19:33:43.347 回答
0

您可以使用伪造的 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>
于 2013-09-16T15:53:13.027 回答