Question

我试图以表格格式显示各种项目（每个条目都有各种属性）。还需要以下内容：

列应该是动态的，以便紧密贴合内容，没有固定宽度（由表格布局处理）
应该可以点击行来激活该行条目上的操作，例如：显示包含该内容的扩展版本的新页面（使用CSS display: table/table-row/table-cell而不是<table>/<tr>/<td>处理 - 根据示例代码）。（我的另一个原因是我使用JSF，它生成HTML，但有点让我不得不使用它。）
我无法做到这一点：如果可能，表格不应超出屏幕宽度。特别是，＆＃34;摘要＆＃34;列显示（可能很长）文本，必要时将被截断，因此文本适合单元格，该单元格适应表格宽度，可能不会宽于屏幕宽度。
- 我在此摘要中使用CSS text-overflow: ellipsis以及其他所需设置。因为周围的<div>已经有display: table-cell，而ellipsis属性needs an inline/block element，＆＃34;摘要＆＃34;文本包含在另一个<div>。

以下是所需效果的示例（请注意底部没有滚动条）：

虽然这是我目前能够实现的目标（ 不理想 ）（注意底部的滚动条 - 表示表格在右侧窗口运行）：

以下是实现此目的的准系统代码（可以省略标有/*l&f*/（外观和感觉）的所有属性，它们仅用于生成更清晰，更易于调试的示例。）

CSS和HTML：

＆＃13;

A {
  /*l&f*/text-decoration: inherit;
  /*l&f*/color: inherit;
}
.list-table {
  display: table;
  /*l&f*/border: 1px solid blue;
  /*l&f*/border-spacing: 5px;
}
.list-tr {
  display: table-row;
  /*l&f*/background-color: lightgray;
}
.list-td {
  display: table-cell;
  white-space: nowrap; /* one line */
  /*l&f*/padding: 2px; border : 1px solid green;
  /*l&f*/border: 1px solid red;
}
.summary {
  display: block;
  white-space: nowrap; /* one line */
  overflow: hidden; /* make text overflow */
  text-overflow: ellipsis; /* truncate tex with ... */
  /*l&f*/background-color: lightblue;
}

＆＃13;

<div class="list-table">
  <a href="#1" class="list-tr">
    <div class="list-td">Row 1</div>
    <div class="list-td">More stuff</div>
    <div class="list-td">
      <div class="summary">Some single line run on text goes here</div>
    </div>
  </a>

  <a href="#2" class="list-tr">
    <div class="list-td">Row 2</div>
    <div class="list-td">Other column</div>
    <div class="list-td">
      <div class="summary">This is text content that runs on and on
        and on without end and may need to be truncated somewhere on the
        summary screen depending on screen size to show only the first part
        that will fit.</div>
    </div>
  </a>

  <a href="#3" class="list-tr">
    <div class="list-td">Row 3</div>
    <div class="list-td">Still other content</div>
    <div class="list-td">
      <div class="summary">Here is still more long text that may
        need truncation in the summary version because it is so long.</div>
    </div>
  </a>
</div>

＆＃13;

我已经能够以display: -moz-box样式使用-moz-（以及其他各种summary设置）获得所需的结果。不高兴，因为这不是跨平台的。

你有什么更好的建议吗？非常感谢您的帮助： - ）

Answer 1

如果您可以对导出的HTML进行更改，那么您可以在此找到解决方案。

我对您的HTML进行了一些更改（将父div添加到.summary，以使用table-layout:fixed创建固定表格）

请参阅下面的 SNIPPET ：

A {
  /*l&f*/
  text-decoration: inherit;
  /*l&f*/
  color: inherit;
}
.list-table {
  display: table;
  /*l&f*/
  border: 1px solid blue;
  /*l&f*/
  border-spacing: 5px;
  width: 100%; /* ADDED */
}
/* CREATED */
.fixed-table {
  width:100%;
  table-layout: fixed;
  display:table
}

.list-tr {
  display: table-row;
  /*l&f*/
  background-color: lightgray;
}
.list-td {
  display: table-cell; /* CHANGED */
  white-space: nowrap;
  /* one line */
  /*l&f*/
  padding: 2px;
  border: 1px solid green;
  /*l&f*/
  border: 1px solid red;
}
.summary {
  display: table-cell;
  /*l&f*/
  background-color: lightblue;
  white-space: nowrap;
  /* one line */
  overflow: hidden;
  /* make text overflow */
  text-overflow: ellipsis;
  /* truncate texT with ... */
}

<div class="list-table">
  <a href="#1" class="list-tr">
    <div class="list-td">Row 1</div>
    <div class="list-td">More stuff</div>
    <div class="list-td">
      <div class="fixed-table">
        <div class="summary">Some single line run on text goes here</div>
      </div>
    </div>
  </a>

  <a href="#2" class="list-tr">
    <div class="list-td">Row 2</div>
    <div class="list-td">Other column</div>
    <div class="list-td">
      <div class="fixed-table">
        <div class="summary">This is text content that runs on and on and on without end and may need to be truncated somewhere on the summary screen depending on screen size to show only the first part that will fit.</div>
      </div>
    </div>
  </a>

  <a href="#3" class="list-tr">
    <div class="list-td">Row 3</div>
    <div class="list-td">Still other content</div>
    <div class="list-td">
      <div class="fixed-table">
        <div class="summary">Here is still more long text that may need truncation in the summary version because it is so long.</div>
      </div>
    </div>
  </a>
</div>

Answer 2

.list-table {
  max-width:100vw;
}

Answer 3

我所能做的就是向max-width班级添加（任意）summary：

.summary {
  display: block;
  white-space: nowrap; /* one line */
  overflow: hidden; /* make text overflow */
  text-overflow: ellipsis; /* truncate tex with ... */
  /*l&f*/background-color: lightblue;
  max-width: 500px;
}

您需要提供.summary某种非继承宽度才能让text-overflow正常工作我认为......

截断表格单元格中的溢出文本，因此表格不会比屏幕宽

3 个答案: