0

視覚的に 1 つのエンティティのように見えるように、1 つをもう 1 つ上に積み重ねたい 2 つのテーブルがあります。両方の幅は等しくなければなりません。

議論のために、上のテーブルには 8 つの列があり、下のテーブルには 3 つの列があるとします。下部のテーブルが上部のテーブルと同じ視覚的幅を占めるようにするにはどうすればよいですか?

これが必要な理由は、上部のテーブルにはラジオ ボタンとチェックボックスの項目がロードされており、下部のテーブルには常にキャンセル ボタン、数量フィールド、OK ボタンで構成される 1 つの行しかないためです。さまざまな幅のさまざまな上部テーブルが多数ありますが、下部テーブルの 1 つだけをコーディングし、上部テーブルの 1 つに Javascript 運搬を使用して、上部テーブルと同じ幅を占めるように下部テーブルをその下に配置したいと考えています。

幅を同じにするために、htmlおよび/またはCSSにこだわっています。下のものがテーブルであることに固執しているわけではありません。上のテーブルの幅の中央に配置されたこれらの 3 つのフィールドを提供するソリューションがあれば、それは素晴らしいことです。

4

3 に答える 3

0

私はあなたがこのようなものを探していると思います:

実施例

CSS

table {
    border:1px solid blue;
}
.table1 td {
    border:1px solid red;
    height:50px;
    width:50px;
}
.table2 td {
    height:50px;
    border: 1px solid green;
}

HTML

<table class="table1">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</table>
<table class="table2">
    <td></td>
    <td></td>
    <td></td>
</table>

jQuery

var width = function () {
    $('.table2').width($('.table1').width());
};

$(document).ready(width);
$(window).resize(width);

純粋な JavaScript を好む場合:

実施例2

function tablewidth() {
    var table1 = document.getElementById('table1'),
        style = window.getComputedStyle(table1),
        width = style.getPropertyValue('width'),
        border = style.getPropertyValue('border-left-width'),
        w = parseInt(width, 10) + parseInt(border, 10) * 2 + 'px';

    document.getElementById('table2').style.width = w;
}
window.onresize = tablewidth;
window.onload = tablewidth;
于 2013-07-28T04:13:51.337 に答える
0

次のように div にラップしてみてください。

<div id="table_wrapper">
    <table>...
    <table>....
</div>

CSS を介して div に幅 (たとえば 80%) を割り当て、テーブルの幅を 100% に設定します。これにより、外側の div に対して定義された最大幅にストレッチする必要があります。

于 2013-07-28T03:50:13.033 に答える