0

2 つの 1 行のテーブルを並べて配置すると、目的の結果が得られます。同じ列幅を持たない 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

偽の 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 に答える
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 に答える