1

jQuery の Sortableにはいくつかのニュアンスがあるため、HTML でテーブル要素を表示していますが、 の代わりに を使用して列を作成しています (以下とこのフィドル内):

<style>        
  /* Title row for an action/item */
  .item-row {
    display: table-row;
  }

  /* Keep icon columns narrow */
  .icon_column { 
    display: table-cell;
    width: 20px;
  }

  /* Item columns that are not icons */
  .name_column {
    display: table-cell;
  }    

  .extra_column {
    display: table-cell;
    float: right;
  }
</style>
<table class='table table-condensed'>
  <thead>
    <tr class='table_header'>
      <th>
        <div class='item-row'>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='name_column'>Name</span>
          <span class='extra_column'>Date</span>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class='item_row'>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='name_column'>Name 1</span>
          <span class='extra_column'>Date 1</span>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class='item_row'>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='name_column'>Row 2 Name 2</span>
          <span class='extra_column'>Date 2</span>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class='item_row'>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='name_column'>Name 3</span>
          <span class='extra_column'>Date 3</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

各項目行を 1 行として表示し、extra_column を右いっぱいに浮かせたいと思います。extra_column は右側にあるようですが、item-row 全体がデフォルトで 2 行になっているようです。

この CSS を修正するにはどうすればよいですか? </p>

4

2 に答える 2

2

これはあなたが必要なものですか？

http://jsfiddle.net/QgpRY/2/

CSSマークアップ：

.extra_column {
    display: table-cell;
    text-align: right; /*use this instead*/
    /*float: right;*/ /*this was the problem*/
  }

この最後の例でわかるように、右に配置されています。

更新しました

これはあなたが求めているもので良い解決策になるはずです：

http://jsfiddle.net/QgpRY/12/

  /* Keep icon columns narrow */
  .icon_column { 
    display: table-cell;
    width: 20px !important;
  }

  /* Item columns that are not icons */
  .name_column {
    display: table-cell;
    width:81% !important;
  }    

  .extra_column {
    display: table-cell;
    text-align: right;
    width: 50px !important;
  }

すべてをに変更できれば、はるかに簡単になります<div>。

それが役に立てば幸い！

于 2012-10-09T17:13:10.117 に答える
1

これはあなたが探しているものですか？

基本的に、2 つのグループのスパンをそれぞれ別のスパンにラップしました。最初のグループは float:left を取得し、2 番目のグループは float:right を取得します。

CSS: 

.left { float:left; }
.right { float:right;}

HTML:

<div class='item-row'>
  <span class='left'>
    <span class='icon_column'>*</span>
    <span class='icon_column'>*</span>
    <span class='icon_column'>*</span>
    <span class='name_column'>Name</span>
  </span>
  <span class='right'>
    <span class='extra_column'>Date</span>
  </span>
</div>

1行のコンテンツがスペース（幅）を拡張すると、これはうまくいかないことを付け加えなければなりません。どうすればそれが達成できるかわかりません:)

[更新]
name_columnに固定幅(150px など) を指定することで、上記の問題を取り除くことができます。最後の列のデータが多すぎると、まだうまくいきません。これは、幅を固定することで解決できる可能性があります。「ページ」にまたがりたい場合は、div ラッパー (「table_container」) を取り除くことができます。

于 2012-10-09T17:42:18.763 に答える