Question

我想实现如下表格设计

第一行将折叠（尚未实现），下面的行将出现，我希望第二行稍微移位。要实现这一点，我使用了第二个躯干，但对我来说似乎工作量太大。可以用第二个tr做到吗？

<!DOCTYPE html>
<html lang="en">
<head>
<style>
tr{
border:1px solid black;
}
</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>        
  <table class="table mt-2">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
        <th>Address</th>
        <th>Birth date</th>
        <th>Gender</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Marley</td>
        <td>Johnson</td>
        <td>mjhonson@mail.com</td>
        <td>Canada</td>
        <td>15/05/1990</td>
        <td>Female</td>
        <td><i class="fas fa-angle-down"></i></td>
      </tr>
        <tr>
        <td>Sam</td>
        <td>Kirlman</td>
        <td>skirlman@mail.com</td>
        <td>New Jersey</td>
        <td>12/03/1989</td>
        <td>Male</td>
        <td><i class="fas fa-trash"></i></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Answer 1

为目标行创建一个新类。

 <tr class="push-right">
   <td>Sam</td>
   <td>Kirlman</td>
   <td>skirlman@mail.com</td>
   <td>New Jersey</td>
   <td>12/03/1989</td>
   <td>Male</td>
   <td><i class="fas fa-trash"></i></td>
 </tr>

行中的第一个td元素应像块元素一样工作，以便我们可以分配margin属性。

.push-right {
  td:first-child {
    border-left: 2px solid black;
    margin-left: 10px;
    display:block;
  }
}

JSFiddle

Answer 2

表格行不能有不同的宽度。（还请注意，表格行本身不能有边框）。

一个简单的解决方案可以是在“名字”列中添加一个左填充，并在其他元素上添加一个“假”边框。但是，这不是非常灵活，因为例如表格单元格不能具有填充。

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 0;
}

.sub-item .firstname {
  padding-left: 2em;
  border: none;
}

.sub-item .firstname div {
  border: 1px solid black;
  margin: -1px;
}

<table class="table mt-2">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
      <th>Address</th>
      <th>Birth date</th>
      <th>Gender</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="firstname">Marley</td>
      <td>Johnson</td>
      <td>mjhonson@mail.com</td>
      <td>Canada</td>
      <td>15/05/1990</td>
      <td>Female</td>
      <td><i class="fas fa-angle-down"></i></td>
    </tr>
    <tr class="sub-item">
      <td class="firstname"><div>Sam</div></td>
      <td>Kirlman</td>
      <td>skirlman@mail.com</td>
      <td>New Jersey</td>
      <td>12/03/1989</td>
      <td>Male</td>
      <td><i class="fas fa-trash"></i></td>
    </tr>
  </tbody>
</table>

另一种可能是在开头添加一列。但是，这可能会使屏幕阅读器感到困惑并阻碍可访问性。

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

.sub-item .indent {
  border: 0;
  width: 2em;
}

<table class="table mt-2">
  <thead>
    <tr>
      <th colspan="2">Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
      <th>Address</th>
      <th>Birth date</th>
      <th>Gender</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="firstname" colspan="2">Marley</td>
      <td>Johnson</td>
      <td>mjhonson@mail.com</td>
      <td>Canada</td>
      <td>15/05/1990</td>
      <td>Female</td>
      <td><i class="fas fa-angle-down"></i></td>
    </tr>
    <tr class="sub-item">
      <td class="indent"></td>
      <td class="firstname">Sam</td>
      <td>Kirlman</td>
      <td>skirlman@mail.com</td>
      <td>New Jersey</td>
      <td>12/03/1989</td>
      <td>Male</td>
      <td><i class="fas fa-trash"></i></td>
    </tr>
  </tbody>
</table>

下方如何使表格行具有不同的宽度？

2 个答案: