1

Bootstrap テーブルを使用してガント チャートを作成しています。私の時間は同じ幅です。私は colspan="15" を設定し、その中に div を配置して、必要な幅に設定しています。私が望むのは、 の幅が異なる場合でも、 の垂直方向の境界線がテーブルの本体全体に続くことです。これは可能ですか？これが私のコードです：

<div class="table-responsive gantt-chart">
    <table class="table table-bordered table-striped">
        <tbody>
            <tr>
                <th>Time</th>
                <th>Event</th>
                <th>Location</th>
                <th class="time">8am</th>
                <th class="time">9</th>
                <th class="time">10</th>
                <th class="time">11</th>
                <th class="time">12</th>
                <th class="time">1</th>
                <th class="time">2</th>
                <th class="time">3</th>
                <th class="time">4</th>
                <th class="time">5</th>
                <th class="time">6</th>
                <th class="time">7</th>
                <th class="time">8</th>
                <th class="time">9</th>
                <th class="time">10pm</th>
            </tr>
            <tr>
                <td>11:00 am</td>
                <td>Awesome party</td>
                <td>Party room</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:144px; width:48px;"></div>
                </td>
            </tr>
            <tr>
                <td>1:15 pm</td>
                <td>Test Event</td>
                <td>Home</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:252px; width:48px;"></div>
                </td>
            </tr>
            <tr>
                <td>3:15 pm</td>
                <td>Chad event</td>
                <td>tu casa</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:348px; width:72px;"></div>
                </td>
            </tr>
            <tr>
                <td>9:00 pm</td>
                <td>Randomness</td>
                <td>Random Hall</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:624px; width:72px;"></div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

そして、ここにそれがどのように見えるかのスクリーンショットがあります:

表の質問スタックオーバーフロー

そこに描いた黒い線は、各セクションで何をしたいかを示しています。これが可能かどうか、または別の方法を見つける必要があるかどうかはわかりません。リストされた時間に一致するように、phpを使用して正しい場所に青いdivを入力しています。

4

2 に答える 2

1

前の解決策 (以下を参照) が失敗する場合があり、プロジェクトに jQuery を既に追加している (Bootstrap で必要) ため、JavaScript でそれを行う方法の別の例を次に示します。

  • 垂直バーを動的に追加します (それらはdivs である可能性があります)
  • それらをテーブルの後ろに置きます
  • 行ごとに位置を設定する
  • ページのサイズが変更されたときに位置を再調整します。

このようなもの (この JSFiddleでも確認できます):

function setVerticalBars() {

    var x = 0;
    
    // for each cell with a .time class
    $(".time").each(function() {

        // create the vertical line if it doesn't exist
        if (!$("#vertical-bar-" + x).length) {
            $(".mygantt").append('<div id="vertical-bar-' + x + '" class="vertical-bar"></div>');
        }

        // select the vertical bar associated to this cell
        var bar = $("#vertical-bar-" + x);

        // place it in he same position as the cell
        bar.css("left", $(this).position().left);

        // increase the counter to avoid duplicated id's
        x++;
    });
}

// adjust the divs on page load and when the page is resized
$(document).ready(setVerticalBars );
$(window).on("resize", setVerticalBars );
/* make the odd trs semitransparent instead of gray (so you can see the bars through them) */
.mytable>tbody>tr:nth-child(odd)>td {
    background:rgba(0,0,0,0.05) !important;
}

.mygantt .vertical-bar {
    width:1px;
    background:rgba(0,0,0,0.1);
    position:absolute;
    top:0;
    bottom:0;
}

/* Styles from question */
th.time, td.time {
    width:48px;
}

.gantt-chart {
    position:relative;
}

.gantt-line {
    background:blue;
    height:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="table-responsive gantt-chart mygantt">
    <table class="mytable table table-bordered table-striped">
        <tbody>
            <tr>
                <th>Time</th>
                <th>Event</th>
                <th>Location</th>
                <th class="time">8am</th>
                <th class="time">9</th>
                <th class="time">10</th>
                <th class="time">11</th>
                <th class="time">12</th>
                <th class="time">1</th>
                <th class="time">2</th>
                <th class="time">3</th>
                <th class="time">4</th>
                <th class="time">5</th>
                <th class="time">6</th>
                <th class="time">7</th>
                <th class="time">8</th>
                <th class="time">9</th>
                <th class="time">10pm</th>
            </tr>
            <tr>
                <td>11:00 am</td>
                <td>Awesome party</td>
                <td>Party room</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:144px; width:48px;"></div>
                </td>
            </tr>
            <tr>
                <td>1:15 pm</td>
                <td>Test Event</td>
                <td>Home</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:252px; width:48px;"></div>
                </td>
            </tr>
            <tr>
                <td>3:15 pm</td>
                <td>Chad event</td>
                <td>tu casa</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:348px; width:72px;"></div>
                </td>
            </tr>
            <tr>
                <td>9:00 pm</td>
                <td>Randomness</td>
                <td>Random Hall</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:624px; width:72px;"></div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

このソリューションは、テーブルと、ユーザーがウィンドウのサイズを変更したときに発生する可能性のある変更にうまく適応します。前作よりは良くなったと思いますが、参考までに下に旧作を置いておきます。

編集 - 以前の解決策:

コメントで述べたように、考えられる解決策の 1 つtableは、垂直線を模倣する背景画像を に追加することです。それはこれで達成できます：

.mytable {
    background:url(http://i.imgur.com/8jNZRyf.png) repeat-y right top;
}

ここで、もう 1 つの問題を修正する必要があります。Bootstraptable-strippedスタイルには、1 つの行が透明で、次の行が灰色です。縦線は偶数行のみで確認でき、奇数行では確認できません。これを修正するには、奇数行の背景を灰色から半透明の色に変更します。

.mytable>tbody>tr:nth-child(odd)>td {
    background:rgba(0,0,0,0.05) !important;
}

そして、それはうまくいくはずです。この JSFiddle でデモを見ることができます: http://jsfiddle.net/8su2cr5m/

このソリューションの 1 つの問題: セルが予想される幅を持っている限り、背景画像は機能します。そうでない場合 (例: テーブルが 100% 以上を占める場合、テーブルが使用可能なスペースに収まるようにセルのサイズが変更される場合があります)。これに対する解決策は、JS で幅を計算し、それに応じて背景画像のサイズを変更することです。

あなたの場合の完全なコードは次のとおりです (上記の段落で指定した問題を確認できますが、全画面表示にすると問題はなくなります)。

/* set the table background to mimic the vertical bars bars */
.mytable {
  background:url(http://i.imgur.com/8jNZRyf.png) repeat-y right top;
}

/* make the odd trs semitransparent instead of gray (so you can see the bars through them) */
.mytable>tbody>tr:nth-child(odd)>td {
  background:rgba(0,0,0,0.05) !important;
}

/* Styles from question */
th.time, td.time {
  width:48px;
}

.gantt-line {
  background:blue;
  height:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="table-responsive gantt-chart">
  <table class="mytable table table-bordered table-striped">
    <tbody>
      <tr>
        <th>Time</th>
        <th>Event</th>
        <th>Location</th>
        <th class="time">8am</th>
        <th class="time">9</th>
        <th class="time">10</th>
        <th class="time">11</th>
        <th class="time">12</th>
        <th class="time">1</th>
        <th class="time">2</th>
        <th class="time">3</th>
        <th class="time">4</th>
        <th class="time">5</th>
        <th class="time">6</th>
        <th class="time">7</th>
        <th class="time">8</th>
        <th class="time">9</th>
        <th class="time">10pm</th>
      </tr>
      <tr>
        <td>11:00 am</td>
        <td>Awesome party</td>
        <td>Party room</td>
        <td class="gantt-section" colspan="15">
          <div class="gantt-line" style="margin-left:144px; width:48px;"></div>
        </td>
      </tr>
      <tr>
        <td>1:15 pm</td>
        <td>Test Event</td>
        <td>Home</td>
        <td class="gantt-section" colspan="15">
          <div class="gantt-line" style="margin-left:252px; width:48px;"></div>
        </td>
      </tr>
      <tr>
        <td>3:15 pm</td>
        <td>Chad event</td>
        <td>tu casa</td>
        <td class="gantt-section" colspan="15">
          <div class="gantt-line" style="margin-left:348px; width:72px;"></div>
        </td>
      </tr>
      <tr>
        <td>9:00 pm</td>
        <td>Randomness</td>
        <td>Random Hall</td>
        <td class="gantt-section" colspan="15">
          <div class="gantt-line" style="margin-left:624px; width:72px;"></div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

于 2015-07-30T00:45:22.953 に答える
0 

function setVerticalBars() {

    var x = 0;
    
    // for each cell with a .time class
    $(".time").each(function() {

        // create the vertical line if it doesn't exist
        if (!$("#vertical-bar-" + x).length) {
            $(".mygantt").append('<div id="vertical-bar-' + x + '" class="vertical-bar"></div>');
        }

        // select the vertical bar associated to this cell
        var bar = $("#vertical-bar-" + x);

        // place it in he same position as the cell
        bar.css("left", $(this).position().left);

        // increase the counter to avoid duplicated id's
        x++;
    });
}

// adjust the divs on page load and when the page is resized
$(document).ready(setVerticalBars );
$(window).on("resize", setVerticalBars );
/* make the odd trs semitransparent instead of gray (so you can see the bars through them) */
.mytable>tbody>tr:nth-child(odd)>td {
    background:rgba(0,0,0,0.05) !important;
}

.mygantt .vertical-bar {
    width:1px;
    background:rgba(0,0,0,0.1);
    position:absolute;
    top:0;
    bottom:0;
}

/* Styles from question */
th.time, td.time {
    width:48px;
}

.gantt-chart {
    position:relative;
}

.gantt-line {
    background:blue;
    height:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="table-responsive gantt-chart mygantt">
    <table class="mytable table table-bordered table-striped">
        <tbody>
            <tr>
                <th>Time</th>
                <th>Event</th>
                <th>Location</th>
                <th class="time">8am</th>
                <th class="time">9</th>
                <th class="time">10</th>
                <th class="time">11</th>
                <th class="time">12</th>
                <th class="time">1</th>
                <th class="time">2</th>
                <th class="time">3</th>
                <th class="time">4</th>
                <th class="time">5</th>
                <th class="time">6</th>
                <th class="time">7</th>
                <th class="time">8</th>
                <th class="time">9</th>
                <th class="time">10pm</th>
            </tr>
            <tr>
                <td>11:00 am</td>
                <td>Awesome party</td>
                <td>Party room</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:144px; width:48px;"></div>
                </td>
            </tr>
            <tr>
                <td>1:15 pm</td>
                <td>Test Event</td>
                <td>Home</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:252px; width:48px;"></div>
                </td>
            </tr>
            <tr>
                <td>3:15 pm</td>
                <td>Chad event</td>
                <td>tu casa</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:348px; width:72px;"></div>
                </td>
            </tr>
            <tr>
                <td>9:00 pm</td>
                <td>Randomness</td>
                <td>Random Hall</td>
                <td class="gantt-section" colspan="15">
                    <div class="gantt-line" style="margin-left:624px; width:72px;"></div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

于 2019-02-06T09:50:48.523 に答える