1

動的に生成されたテーブルのスタイルを設定するときに問題が発生します。ユーザーは、必要な列の数を選択できます。一部の列は固定長になっています。毎回列の正確な幅を指定する必要がなく、異なるデータ/異なるブラウザで異なる列幅になることなく、他の人に残りのスペースのパーセンテージを与えるにはどうすればよいですか？

例：

<style type="text/css">
table{
    width:800px;
    border:1px solid #CCCCCC;
   /* table-layout: fixed; */
}

table td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border:1px solid #EEEEEE;
}

table tbody td.active{
    text-align:center;
    width:100px; /* fixed */
}

table tbody td.option{
    width:100px; /* fixed */
}


table tbody td.nonfixed{
    width:auto;
}
</style>
<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Description</td>
            <td>Active</td>
            <td colspan="2">Options</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="5"><a href="">+ Add new row</a><td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td class="nonfixed">[Name 1]</td>
            <td class="nonfixed">[Description 1]</td>
            <td class="active">[X]</td>
            <td class="option">Edit</td>
            <td class="option">Delete</td>
        </tr>
        <tr>
            <td class="nonfixed">[Name 2]</td>
            <td class="nonfixed">[Description 2]</td>
            <td class="active">[0]</td>
            <td class="option">Edit</td>
            <td class="option">Delete</td>
        </tr>
    </tbody>
</table>

この例では、両方の「固定されていない」列の幅がまったく同じである必要があります。これは、ユーザーが固定されていない列を追加したり、最初の列を最後の列に切り替えたりする場合にも機能するはずです。

誰が私を助けることができますか？

4

1 に答える 1

2

2つの可能なアプローチがあります...スクリプトを使用して柔軟な幅の列の幅を計算して平均化するか、ネストされたテーブルを使用して2つのフレックス列を50％で分割します。

<table>
  <tr>
    <td class="fixed"></td>
    <td class="fixed"></td>
    <td class="fixed"></td>

    <td class="flex-wrapper">
      <table width="100%">
        <tr>
          <td width="50%"></td>
          <td width="50%"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
于 2013-01-21T17:29:06.123 に答える