12

2つのテーブルを重ねて使用していますが、列の幅を正確に揃えたいのですが、これを行う方法はありますか？固定テーブルの列幅などを試しましたが、喜びはありません

あなたはフィドルで列が互いにわずかにずれているのを見ることができます http://jsfiddle.net/askhe/

HTML

<table class="tblresults txtblack">
                            <tr class="tblresultshdr bold">
                                <td class="col1">Company</td>
                                <td>Currency</td>
                                <td>Bid</td>
                                <td>Ask</td>
                                <td>YTD Vol</td>
                            </tr>
                            <tr>
                                <td class="col1">ABC</td>
                                <td>GBP</td>
                                <td>94</td>
                                <td>16</td>
                                <td>3,567,900</td>
                            </tr>
                            <tr>
                                <td class="col1">DEF</td>
                                <td>GBP</td>
                                <td>3</td>
                                <td>46</td>
                                <td>10,000</td>
                            </tr>
                            <tr>
                                <td class="col1">GHI</td>
                                <td>GBP</td>
                                <td>3</td>
                                <td>46</td>
                                <td>10,000</td>
                            </tr>
                            <tr>
                                <td class="col1">JKLM</td>
                                <td>GBP    </td>
                                <td>7</td>
                                <td>46</td>
                                <td>56,000</td>
                            </tr>

</table>
                        <table class="tblresults txtblack margintop10">
                            <tr>
                                <td colspan="5" class="bold" >Investments</td>
                            </tr>
                            <tr>
                                <td class="col1">ghjk</td>
                                <td>GBP</td>
                                <td>13</td>
                                <td>6</td>
                                <td>130,000</td>
                            </tr>
                            <tr>
                                <td class="col1">asdsa</td>
                                <td>GBP</td>
                                <td>120</td>
                                <td>46</td>
                                <td>16,000</td>
                            </tr>
                            <tr>
                                <td class="col1">dfdsfsdf </td>
                                <td>GBP</td>
                                <td>1</td>
                                <td>4</td>
                                <td>13,000</td>
                            </tr>
                       </table>​

CSS

table.tblresults {
    width:100%;
    *width:99.5%;
    border: 1px solid #b9b8b8;
    top: 0;
}
table.tblresults tr.tblresultshdr {background: lightgrey;}
table.tblresults tr.tblresultshdr td {padding: 6px;}
table.tblresults td {padding: 8px; border: 1px solid #b9b8b8;}
table.tblresults td.col1 {width: 70%;}
​
4

5 に答える 5

6

table実際のレイアウトではなく、実験からのプローブなど、科学データを対象とした要素：

テーブルは、非ビジュアルメディアにレンダリングするときに問題が発生する可能性があるため、ドキュメントコンテンツをレイアウトする手段として純粋に使用しないでください。さらに、グラフィックスで使用する場合、これらのテーブルを使用すると、ユーザーは水平方向にスクロールして、より大きなディスプレイを備えたシステムで設計されたテーブルを表示する必要があります。これらの問題を最小限に抑えるために、作成者はテーブルではなくスタイルシートを使用してレイアウトを制御する必要があります。

それらをレイアウトに使用していない間、問題は実際にはレンダリング/レイアウトの問題です。これに対する最も簡単な解決策は、両方のテーブルを1つ（jsfiddle）にマージすることです。

データを1つの巨大なテーブルではなく、多くの小さなテーブルにカプセル化する場合は、ほとんどすべての列の幅を指定する必要があります。

于 2012-07-30T15:40:48.470 に答える
3

それらを同じテーブルに入れてみませんか？それらは意味的に類似しているようです。 http://jsfiddle.net/askhe/5/

于 2012-07-30T15:44:52.693 に答える
2

テーブルをマージする必要はありません。これを使用できます

table-layout: fixed;

ここにそれについての素晴らしい記事があり ますhttps://css-tricks.com/fixing-tables-long-strings/

于 2020-01-26T11:21:18.973 に答える
0

多くの場合、テーブルをマージするソリューションが最善で最も単純なものであることに同意しますが、同じ列を持つこの2つの別々のテーブルを実際に用意する必要がありました（1つのテーブルを固定して2番目をスクロール可能にするため）

これを実現するために、同じ列数の2つのテーブルを宣言しました。1つは幅のルール（％とpx）があり、もう1つはありません。

次に、Javascriptを使用して、ルール付きテーブルの幅を空きテーブルに適用しました。

document.getElementById("HeaderTable").style.width = document.getElementById("main").clientWidth ;
document.getElementById("tar1").style.width = document.getElementById("org1").clientWidth ;
document.getElementById("tar2").style.width = document.getElementById("org2").clientWidth ;
document.getElementById("tar3").style.width = document.getElementById("org3").clientWidth ;
document.getElementById("tar4").style.width = document.getElementById("org4").clientWidth ;

1行目はテーブル幅を修正し、次に列ごとに修正します。ルールされた列に適用されるパーセンテージを送信するため、使用.clientWidthは重要です。.style.width

これはほとんど機能していましたが、完全ではありませんでした。テーブルのレイアウトは似ていますが、数ピクセルずれています。IEで動作するために必要なのはそれだけだったので、固定値でそれを移動して、必要なものにできるだけ近づけることができたので、コードを次のように変更します。

document.getElementById("tar1").style.width = document.getElementById("org1").clientWidth - 9;
document.getElementById("tar2").style.width = document.getElementById("org2").clientWidth ;
document.getElementById("tar3").style.width = document.getElementById("org3").clientWidth - 10;
document.getElementById("tar4").style.width = document.getElementById("org4").clientWidth - 10;

テーブルが異なれば、値も異なる可能性があると思います。しかし、私を驚かせたのは、ズームレベルに関係なく、すべての主要なブラウザーで機能することです。

windowsのサイズ変更により配置が解除されるため、関数をこのイベントにバインドする必要があります。また、このソリューションは、テーブルの極端なサイズでは機能しなくなりました

いくつかのCSSが関係しているので、これがjsfiddleです。今のところ、ズームでは機能しません。フローティングヘッダーがくっつかないため、right: 0px理由はまだわかりません。

于 2016-05-26T10:04:00.640 に答える
-2

さて、この単純なHTMLスニペットを使用してそれを行うことができます。私の場合、HTMLからPDFを作成していたので、このソリューションはうまくいきました。それが他の誰かを助けることを願っています。

<table border=0>
  <tr>
    <td>
      <!--Insert table 1 -->
    </td>
    <td>
      <!--Insert table 2 -->
    </td>
  </tr>
</table>
于 2017-09-26T11:37:19.843 に答える