Question

我有一个表，在右边的最后一列中，我有行中数据的管理链接。我现在必须添加更多功能，并决定用图标替换文本'edit'，'delete'...以节省空间，但它仍然不够空间..我想做的就是拥有它最后一列有一个图标，当人们将鼠标悬停在它上面时，会将单元格展开到左边，以显示该记录可用的所有功能图标，而不会扩展所有其他行的表格列。我看过这只做了一次，但我不记得在哪里......

由于

这是我找到的代码，但是底部的边框永远不会改变：hover

body {
  margin: 0
}

.table {
  display: table;
  width: 100%;
  border-bottom: 1px solid #ccc
}

.tHead,
.tRow {
  display: table-row;
  position: relative;
}

.tCell {
  display: table-cell;
  padding: 5px;
  background: #fff;
  border-top: 1px solid #ccc;
  position: relative
}

.tHead .tCell {
  background: #ccc;
}

.tRow:hover .tCell {
  background: #f4f4f4;
  border-color: #000;
}

.tRow .tCell:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  top: 0;
  left: 0;
  display: none;
}

.tRow:hover + .tRow .tCell {
  border-color: #000;
}

.tRow .tCell:first-child {
  width: 10px;
  cursor: pointer;
  opacity: 1
}

.menu {
  display: block;
  height: 3px;
  width: 3px;
  background: #ccc;
  position: relative;
  margin-left: 5px;
  top: 3px;
  z-index: 3;
}

.menu:before,
.menu:after {
  display: block;
  height: 3px;
  width: 3px;
  background: #ccc;
  position: absolute;
  content: " ";
  top: -6px;
}

.menu:before {
  top: -12px;
}

.actions {
  display: none;
  position: absolute;
  white-space: nowrap;
  z-index: 4;
  left: 0;
  right: 0;
  margin-top: -19px;
  padding: 5px 5px 5px 28px;
}

.tCell:hover .menu:before,
.tCell:hover .menu:after,
.tCell:hover .menu {
  background: #000
}

.tCell:hover .actions {
  display: block
}

.tRow:hover .tCell:first-child:hover:before,
.tRow:hover .tCell:first-child:hover ~ .tCell:before {
  display: block;
}

<div class="table">
  <div class="tHead">
    <div class="tCell"></div>
    <div class="tCell">Name</div>
    <div class="tCell">Age</div>
    <div class="tCell">Gender</div>
    <div class="tCell">Job Profile</div>
  </div>
  <div class="tRow">
    <div class="tCell"><span class="menu"></span><span class="actions">
      <a href="#">Edit</a> |
      <a href="#">Delete</a>
    </span>
    </div>
    <div class="tCell">Kelly</div>
    <div class="tCell">28</div>
    <div class="tCell">Female</div>
    <div class="tCell">Web Developer</div>
  </div>
  <div class="tRow hovered">
    <div class="tCell"><span class="menu"></span>
      <span class="actions">
      <a href="#">Edit</a> |
      <a href="#">Delete</a>
    </span>
    </div>
    <div class="tCell">Jack

    </div>
    <div class="tCell">32</div>
    <div class="tCell">Male</div>
    <div class="tCell">Java Developer</div>
  </div>
  <div class="tRow">
    <div class="tCell"><span class="menu"></span><span class="actions">
      <a href="#">Edit</a> |
      <a href="#">Delete</a>
    </span>
    </div>
    <div class="tCell">
      Janaya
    </div>
    <div class="tCell">26</div>
    <div class="tCell">Female</div>
    <div class="tCell">.Net Developer</div>
  </div>
  <div class="tRow ">
    <div class="tCell"><span class="menu"></span><span class="actions">
      <a href="#">Edit</a> |
      <a href="#">Delete</a>
    </span>
    </div>
    <div class="tCell">Jim</div>
    <div class="tCell">24</div>
    <div class="tCell">Male</div>
    <div class="tCell">Full Stack Developer</div>
  </div>
</div>

Answer 1

如果您需要以下示例，则可以在vanilla CSS中执行此操作。

＆＃13;

td {
  border: 1px solid black;
}

.lastcell {
  max-width: 10px;
  white-space: nowrap;
  overflow: hidden;
  transition: 1s;
}

.lastcell:hover {
  max-width: 1000px;
}

＆＃13;

<table>
  <tr>
    <td>Some text</td>
    <td class="lastcell">Icon1 Icon 2 Icon3</td>
  </tr>
  <tr>
    <td>Some text</td>
    <td class="lastcell">Icon1 Icon 2 Icon3</td>
  </tr>
  <tr>
    <td>Some text</td>
    <td class="lastcell">Icon1 Icon 2 Icon3</td>
  </tr>
</table>

＆＃13;

Answer 2

下面的代码将在文本长度大于宽度的情况下扩展行

css：

 td {
  border: 1px solid black;
}

.expandcell{
  max-width: 50px;
  white-space: nowrap;
  overflow: hidden;
  transition: 1s;
  text-overflow: ellipsis
}

.expandcell:hover {
  white-space: pre-line;
}

html：

<table>
  <tr>
    <td>Some text</td>
    <td class="expandcell">Icon1 Icon 2 Icon3 Icon4</td>
  </tr>
  <tr>
    <td>Some text</td>
    <td class="expandcell">Icon1 Icon 2 Icon3</td>
  </tr>
  <tr>
    <td>Some text</td>
    <td class="expandcell">Icon1 Icon 2 Icon3</td>
  </tr>
</table>

在悬停时展开表格单元格

2 个答案: