使用溢出自动将单元格宽度调整为CSS中的内容-Java 学习之路

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

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

但结果是所有单元格都获得了相同的宽度，我需要将单元格调整为内部内容，因此在内容短的单元格中没有太多腰部白色空间（例如复选框1） .

我不能应用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>

1 回答

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

回复于 2024-04-28T17:53:14+08:00

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

1 回答

相关问题