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>

，那将会轻松得多

希望它有所帮助！

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

<强> [UPDATE]
通过giving the name_column a fixed width（如150px），您可以摆脱上述问题。当最后一列有太多数据时，它仍然会出错。这也许可以通过给予固定宽度来解决。如果你希望它跨越“页面”，你可以摆脱div包装器（'table_container'）。

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

2 个答案: