Question

我正在为我的一个屏幕寻找布局设计建议。

我有一个模态弹出窗口，以标签布局显示客户信息，这意味着每个客户有一个标签。每个标签有3个手风琴，其中2个手风琴有表格（网格）。

现在要求是并排比较客户数据而不是使用选项卡。我们最多可以有4个客户。

Answer 1

我认为这就是你想要的： Layout diagram

我建议您使用<table>标记。每个表格列（<td>）将代表一位客户。

我在下面提供了我的例子。

＆＃13;

body {
  background-color: #ccc;
}

#modal {
  width: 80%;
  min-width: 100px;
  height: 80%;
  min-height: 100px;
  background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 15px;
  text-align: center;
}

#customer_table {
  position: absolute;
  bottom: 10px;
  width: 100%;
  height: 75%;
  vertical-align: top;
  border-spacing: 0;
}

tr:first-child td {
  height: 20px;
  background-color: #5a5a5a;
  color: white;
}

td {
  border-left: solid #5a5a5a 1px;
  border-right: solid #5a5a5a 1px;
  border-bottom: solid #5a5a5a 1px;
}

＆＃13;

<html>

<body>
  <div id="modal">
    <h2>Customer table</h2>
    <table id="customer_table">
      <tr>
        <td>Customer 1</td>
        <td>Customer 2</td>
        <td>Customer 3</td>
        <td>Customer 4</td>
      </tr>
      <tr>
        <td>Customer data</td>
        <td>Customer data</td>
        <td>Customer data</td>
        <td>Customer data</td>
      </tr>
    </table>
  </div>
</body>

</html>

＆＃13;

模态弹出窗口的布局设计建议

1 个答案: