8

ある日から別の日にタスクをドラッグアンドドロップできるHTMLとJavascriptでカスタムカレンダーを作成しようとしています。最初の列と最後の2列を固定幅にし、残りの列（月曜日から金曜日）を流動的にして、テーブルが常に親の100％を占めるようにします。

私が抱えている問題は、Fluid TDがコンテンツの量に基づいて自動的にサイズを変更することです。つまり、タスクをある日から別の日にドラッグすると、列の幅がサイズ変更されます。月曜日から金曜日まで、コンテンツに関係なく、text-overflow：hiddenを設定せずに、まったく同じサイズにしたいです。（タスクは常に表示される必要があるため）

つまり、灰色の列は固定幅で、赤い列は流動的ですが、内容に関係なく互いに均一である必要があります。

編集：ドラッグアンドドロップ機能にjQueryを使用しているので、JavaScriptソリューションでも問題ありません（ただし、好ましくありません）。

JSFiddleLiveの例

HTML：

<table>
  <tr>
    <th class="row_header">Row Header</th>
    <th class="fluid">Mon</th>
    <th class="fluid">Tue</th>
    <th class="fluid">Wed</th>
    <th class="fluid">Thurs</th>
    <th class="fluid">Fri</th>
    <th class="weekend">Sat</th>
    <th class="weekend">Sun</th>
  </tr>
  <tr>
    <td>Before Lunch</td>
    <td>This col will be wider than the others because it has lots of content...</td>
    <td></td>
    <td></td>
    <td></td>
    <td>But I would really like them to always be the same size!</td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS：

    table {
        width: 100%;
    }       

    td, th {
        border:1px solid black;
    }  

    th {
        font-weight:bold;            
        background:red;
    }

    .row_header {
        width:50px;
        background:#ccc;
    }

    .weekend {
        width:100px;
        background:#ccc;
    }

    .fluid {
        ???
    }
4

4 に答える 4

10

ダニー、

これがあなたが探しているものだと思います。

ここでフィドルhttp://jsfiddle.net/T6YNK/22/

Chromeでチェックインしました。

コード

                <table>
      <tr>
        <th class="row_header">Row Header</th>
        <th class="fluid">Mon</th>
        <th class="fluid">Tue</th>
        <th class="fluid">Wed</th>
        <th class="fluid">Thurs</th>
        <th class="fluid">Fri</th>
        <th class="weekend">Sat</th>
        <th class="weekend">Sun</th>
      </tr>
      <tr>
        <td>Before Lunch</td>
        <td>This col will be wider than the others because it has lots of content...</td>
        <td></td>
        <td></td>
        <td></td>
        <td>But I would really like them to always be the same size!</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>

    <style type="text/css">

        table {
            width: 100%;
        }        

        td, th {
            border:1px solid black;
        }   

        th {
            font-weight:bold;            
            background:red;
        }

        .row_header {
            width:50px;
            background:#ccc;
        }

        .weekend {
            width:100px;
            background:#ccc;
        }

        td,
        th        {
            overflow:hidden;
        }
    .fluid {

}
.weekend,
.row_header{
width:50px !important;

}

table{
    border: 1px solid black;
    table-layout: fixed;
    width:100%;

}
    </style>​
于 2012-07-16T16:04:23.020 に答える
2

jQueryの使用（おそらく通常のJSでも実行できますが、この種のジョブにはそれを好みます）：

（注：テーブルにIDを付けたので、選択しやすくなり、少し手を加えるだけでIDなしで実行できます）

    $(function() {
        var $my_table = $("#my_table")
            ,current_width = $my_table.width()
            ,fluid_columns = $("table .fluid")
            ,spread_width = (current_width - 150) / fluid_columns.length;

        fluid_columns.width(spread_width);

        $(window).on("resize", function() {
            current_width = $my_table.width();
            spread_width = (current_width - 150) / fluid_columns.length;
            fluid_columns.width(spread_width);
        })
    });
于 2012-07-16T15:56:19.437 に答える
1

あなたはおそらくすることができますか？

.fluid {
    width:10%;
}
于 2012-07-16T15:25:20.243 に答える
1

CSSだけを使ってこれはどうですか？

http://jsfiddle.net/T6YNK/16/

于 2012-07-16T15:57:02.220 に答える