在 table 中使用省略号

Question

我有一个使用省略号的 table，但我被相互矛盾的争论所困扰。场景是我有一个带有 tr 标签和 2 个 td 的 table。我需要第一个 td 是文本的宽度 ( border-collapse: collapse ) 这很好，但是，我需要 table 的宽度是 100% 所以在第二个 td 我可以使用省略号.我还没有找到一种方法来折叠第一个 td 并将第二个用作省略号。

http://jsfiddle.net/epywtvjf/2/

   <table>
     <tr>
        <td>This is the first div.
        </td>
        <td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
        </td>
      </tr>
      <tr>
        <td>This is the first div.
        </td>
        <td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
        </td>
      </tr>
      <tr>
        <td>This is the first div.
        </td>
        <td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
        </td>
      </tr>
   </table>

table{
   table-layout: fixed;
   width: 100%;
   border-collapse: collapse;
}

table td{
  white-space: nowrap;
  border: none;
  line-height:unset;
  padding: 0px;
  text-align: left;
}

Answer 1

更改 table-布局：固定和 overflow:hidden？那会解决你的问题吗？ here

Answer 2

您可以通过向 html 中的 td 添加 class 然后使用 . class 选择器在 css.

<table>
         <tr>
            <td class="col1">This is the first div.
            </td>
            <td class="col2">This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
            </td>
          </tr>
</table>


table {
       table-layout: fixed;
       border-collapse: collapse;
       width: 100%;
}
td{
      white-space: nowrap;
      border: none;
      padding: 0px;
      text-align: left;
      border-collapse: collapse;
      overflow: hidden;
}
.col2 {
      text-overflow: ellipsis;
}

http://jsfiddle.net/krewn/qcypz5xk/

Answer 3

您可能需要为 tr 添加 display flex。以下 css 对我有用。

table {
       table-layout: fixed;
       border-collapse: collapse;
       width:100%;
}
tr{
  display: flex; 
}
td{
      white-space: nowrap;
      border: none;
      padding: 0px;
      text-align: left;
      border-collapse: collapse;
}
#td2 {
      overflow:hidden;
      text-overflow: ellipsis;
}

http://jsfiddle.net/krewn/opputmg3/1/

在 table 中使用省略号

using ellipsis in table

css

css-tables