使用跨度作为列在表中浮动跨度

Question

由于一些nuances with jQuery's Sortable，我在 HTML 中显示了一个表格元素，但使用 's 来创建列而不是 's（在this fiddle 下方和中）：

<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>

我希望每个项目行显示为一行，其中 extra_column 一直浮动到右侧。 extra_column 似乎在右侧，但整个 item-row 似乎默认为两行。

如何更正此 CSS？ ​

Answer 1

这是你需要的吗？

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

CSS 标记：

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

正如您在this last example 中看到的，它向右对齐。

---

更新

这应该是您所要求的一个很好的解决方案：

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>'s会容易很多

希望对你有帮助！

Answer 2

this 是你要找的吗？

我基本上将两组跨度包装在另一个跨度中。第一组获得浮动：左，第二组获得浮动：右。

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 行的内容扩展它所获得的空间（宽度）时，就会出错。我不确定如何实现 :)

[更新]
通过giving the name_column a fixed width（比如150px），可以摆脱上面提到的问题。当最后一列数据太多时，它仍然会出错。这可能也可以通过给定一个固定宽度来解决。 如果您希望它跨越“页面”，则可以摆脱 div 包装器（“table_container”）。