Question

我有下表，每个单元格中的内容宽度不同。我想要在nowrap和溢出旁边的长期。

我尝试了这里提到的内容：Why does overflow:hidden not work in a <td>?

但结果是所有单元格的宽度都相同，我需要将单元格调整为内部内容，因此内容较短的单元格中没有太多腰部空白区域（例如复选框1）。 / p>

我不能应用div，而且我不能对每列应用特定宽度，因为它是动态表，因此列数和内容可能会发生变化。

¿任何线索？

<html>
  <head>
    <style>
    table {
      width: 100%;
    }
    table td {
      border: 1px solid #ccc;
      max-width: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <input type="checkbox" />
        </td>
        <td>
          ID001
        </td>
        <td>
          Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-
        </td>
      </tr>
    </table>
  </body>
</html>

Answer 1

table {
  width: 100%;
  table-layout: fixed;
  width: 100%;
}

table td:nth-of-type(1) {
  width: 20px;
  padding: 5px 0;
}
table td:nth-of-type(2) {
  width: 100px;
}
table td {
  border: 1px solid #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 10px;
}

<table>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      ID001
    </td>
    <td>
      Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-
    </td>
  </tr>
</table>

使用溢出自动将单元格宽度调整为CSS中的内容

1 个答案: