2

列幅に関して多くの質問がありますが、私のようなシナリオの答えを見つけることができませんでした。

これが私のテーブルです：

<table>
    <tr>
        <td colspan="3">Title goes here</td>
        <td>A</td>
        <td class="right">B</td>
    </tr>

    <tr>
        <td rowspan="3">C</td>
        <td>D</td>
        <td>E</td>
        <td>F</td>
        <td class="right">G</td>
    </tr>

    <tr>
        <td>H</td>
        <td colspan="2" class="center">I</td>
        <td rowspan="2" class="right">J</td>
    </tr>

    <tr>
        <td>K</td>
        <td>L</td>
        <td>M</td>
    </tr>

    <tr>
        <td class="right">N</td>
        <td colspan="4" class="center">O</td>
    </tr>
</table>

これが私のCSSです：

<style>
    table 
    {
        table-layout: fixed;

    }

    table, td 
    {
        border: 1px solid;
    }

    .right 
    {
        text-align:right;
        vertical-align:bottom;
    }
    .center 
    {
        text-align: center;
    }
</style>

私が達成したいのは、5つの列すべてが、最も幅の広い列に基づいて同じ幅になるようにすることです。タイトルの大きさがわからないというのがアイディアです。テーブルに固定幅（たとえば、200pxまたは100％）を設定できることは知っていますが、それはしたくありません。タイトルが拡大するにつれて、列の幅とテーブルの幅の両方を拡大したいと思います。ご覧のとおり、タイトルは3列にまたがっています。

4

1 に答える 1

1

CSSを使用しても、これをHTMLで実行することはできません。スクリプトも必要です。ブラウザがテーブルをフォーマットした後にテーブルを処理し、最も幅の広い列を見つけて、すべての列をその幅に設定するスクリプトです。table要素にが含まれていると仮定するとid=t、次の純粋なJavaScriptコードがその役割を果たします。

<script>
window.onload = function () {
var tbl = document.getElementById("t");
var row = tbl.rows[0];
var maxWidth = 1;
for ( var i = 0; i < row.childNodes.length; i++ ) {
  var width = row.childNodes[i].offsetWidth;
  if(width > maxWidth) { maxWidth = width; } 
  }
for ( var i = 0; i < row.childNodes.length; i++ ) {
  row.childNodes[i].style.width = maxWidth + "px"; 
  }
}
</script>
于 2012-11-22T14:34:20.010 に答える