1

私はTwitterのブートストラップを使用していますが、それが私がやっていることに違いをもたらすとは思いません。

基本的に私はテーブルを持っています。テーブルを埋めている列挙型の長さと、コンテナの全長まで「パディング」したい最後の行をテストしています。つまり、10行未満の場合は、次の行スパンを持つ行を追加したいです。 10 - item.count...ただし、空白の行をレンダリングするだけです...これは意図的なものですか、それとも何か間違っていますか? ここにフィドルがあります：

http://jsfiddle.net/L46FX/37/

ここに表があります...どんな助けでも大歓迎です...

<table class="table table-bordered">
   <thead>
      <tr>
         <th>#</th>
         <th>First Name</th>
         <th>Last Name</th>
         <th>Username</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td rowspan="2">1</td>
         <td>Mark</td>
         <td>Otto</td>
         <td>@mdo</td>
      </tr>
      <tr>
         <td>Mark</td>
         <td>Otto</td>
         <td>@TwBootstrap</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Jacob</td>
         <td>Thornton</td>
         <td>@fat</td>
      </tr>
      <tr>
         <td>3</td>
         <td colspan="2">Larry the Bird</td>
         <td>@twitter</td>
      </tr>
      <tr>
         <td colspan="4" rowspan="10">
           this should be a row that is 10 rows long...
        </td>
      </tr>
   </tbody>
</table>

編集：

示唆されているように、javascript が答えのようです...これが私が思いついたものです。テーブルがタブにあるという事実のために行の高さをテストし、高さ属性が現在ではなかったため 0 に戻りましたアクティブなタブで..

 $('.stretch').each(function () {
            var rows = $(this).rowCount();
            if (rows < 10) {
                var lr = $(this).children('tbody').children('tr:last');
                var bg = lr.children('td').first().css('background-color');
                var ht = lr.css('line-height').replace('px', '') * (10 - rows);
                var row = '<td colspan="' + lr.children('td').length + '"></td>';
                $(this).children('tbody').append('<tr style="height: ' + ht + 'px; background-color: ' + bg + '">' + row + '</tr>');
            }
        });

また、私が何をしていたかを明確にするために...テーブルが1行をレンダリングするとき、それは本当に嫌いです:)私はテーブルのアクションアイテムをフッターに入れる傾向があるので、これはコンテナーを巨大列を作成し、tfoot を親の下部または親のすぐ近くに固定します....

4

3 に答える 3

0

CELL は 10 COLUMNS の長さである必要があります。「行」と「列」(col)、さらに「行」と「セル」の意味を混同しています。

<tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>    
<tr>
    <td colspan="10">this should be a CELL that is 10 COLUMNS long...</td>
</tr>

もちろん、テーブルには最初に10列が必要ですが、あなたのものはそうではありません。

于 2013-10-29T05:50:50.027 に答える
0

私は本当の問題を理解していませんでしたが、<td>間違って使用したよりも、最後のテーブルセルが10行にまたがる必要があります。

これは有効な html ではありません。最後の行の table-cellに与えるrowspanと、table-cell にまたがるスペースがありません。

ROWSPAN:この属性は、現在のセルがまたがる行数を指定します。この属性のデフォルト値は 1 (「1」) です。値ゼロ ("0") は、セルが現在の行から、セルが定義されているテーブル セクション (THEAD、TBODY、または TFOOT) の最後の行までのすべての行にまたがることを意味します。

テーブル指定の読み取り

これを見る

于 2013-10-29T14:05:52.410 に答える
0

完全に理解できているかどうかはわかりません...しかし、ここに私の考えがあります...

  1. rowspanはコードで間違って使用されています。横に行がある場合にのみheight、 a のが増加します。この例を参照してください: http://reference.sitepoint.com/html/th/rowspantrcolumn

  2. 最後の行をそのサイズの 10 倍に拡張する場合は、次のようなスクリプトを使用できます。

    var a = $( "tr" ).last().height();
$( "tr" ).last().css('height',a * 10 + 'px');

    デモは次のとおりです。http://jsfiddle.net/L46FX/38/

于 2013-10-29T13:56:26.993 に答える