Question

我在搜索时从数据库中创建一个拉动...我不知道会有多少结果，所以我想将它们列在表格中，如下所示：

[用户信息，大约4到8行] [用户信息，大约4到8行] [用户信息，大约4到8行]

并让它自然地将行向下推到页面上，因为它们不能继续变宽，所以如果它可以根据浏览器的宽度适合2或3，那么它可以，但是当不再合适时，则启动一个新线...

我无法弄明白该怎么做。

我有这样的表：

<table align="left" width="150" style="width: 150px; border-style: solid; border-color: {bordercolor}; border-width: 2px 2px 4px 2px;">
<tr>
    <td align="left" style="padding-left: 1cm;">
Member Id: {mbrid} <br />
<br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
 <br />
    </td>
</tr>
<table>

然后，{}中的所有数据都被php替换。

但是这些都在页面上，而且没有一个在彼此旁边。

那么你能告诉我我做错了什么吗？

哦，顺便说一句，这只是一个管理功能，所以我并不关心设计是否令人惊讶...我想也许我应该以防万一我们出售这个业务？哼。值得深思。

Answer 1

我会将该表用作包含会员ID，用户名等列的表格，或者当您代表用户列表时，我会使用列表

.memberInfo
{
  list-style-type: none;
  padding:none;
}

.memberInfo li
{
  float:left;
  padding:5px;
  margin:5px;
  width:150px;
  border-bottom: solid 1px black;
}

.memberInfo .label
{
  font-weight:bold;
}

.memberInfo .options
{
  display:block;  
}

<ul class="memberInfo">
  <li>
    <div><span class="label">Member Id:</span> {mbrid}</div>
    <div><span class="label">Username:</span> {un}</div>
    <div><span class="label">Name:</span> {name}</div>
    <div><span class="label">email:</span> {email}</div>
    <div><span class="label">Status:</span> {status}</div>
    <div><span class="label">Referrer: </span> {referrer}</div>
    <div><span class="label options">Options:</span>
      {options}</div>
  </li>

  <li>
    <div><span class="label">Member Id:</span> {mbrid}</div>
    <div><span class="label">Username:</span> {un}</div>
    <div><span class="label">Name:</span> {name}</div>
    <div><span class="label">email:</span> {email}</div>
    <div><span class="label">Status:</span> {status}</div>
    <div><span class="label">Referrer: </span> {referrer}</div>
    <div><span class="label options">Options:</span>
      {options}</div>
  </li>
  <li>
    <div><span class="label">Member Id:</span> {mbrid}</div>
    <div><span class="label">Username:</span> {un}</div>
    <div><span class="label">Name:</span> {name}</div>
    <div><span class="label">email:</span> {email}</div>
    <div><span class="label">Status:</span> {status}</div>
    <div><span class="label">Referrer: </span> {referrer}</div>
    <div><span class="label options">Options:</span>
      {options}</div>
  </li>
  <li>
    <div><span class="label">Member Id:</span> {mbrid}</div>
    <div><span class="label">Username:</span> {un}</div>
    <div><span class="label">Name:</span> {name}</div>
    <div><span class="label">email:</span> {email}</div>
    <div><span class="label">Status:</span> {status}</div>
    <div><span class="label">Referrer: </span> {referrer}</div>
    <div><span class="label options">Options:</span>
      {options}</div>
  </li>
  <li>
    <div><span class="label">Member Id:</span> {mbrid}</div>
    <div><span class="label">Username:</span> {un}</div>
    <div><span class="label">Name:</span> {name}</div>
    <div><span class="label">email:</span> {email}</div>
    <div><span class="label">Status:</span> {status}</div>
    <div><span class="label">Referrer: </span> {referrer}</div>
    <div><span class="label options">Options:</span>
      {options}</div>
  </li>
</ul>

使用列表可以让您更好地使用不同的屏幕尺寸，并且可以更灵活地进行媒体查询等。如果需要，您可以轻松地将CSS更改为弹性框。

我已将<br />替换为<div>，因为它更具语义性，并提供更多样式选项。

Answer 2

在HTML表格中，数据单元格（嵌套在行内）水平排列，然后行（包含数据单元格）垂直堆叠。

所以......这是你想要实现的目标：

table {
border: 2px solid black;
border-bottom-width: 4px;
}

td {
width: 150px;
padding-left: 1cm;
border: 1px solid black;
}

<table>
<tr>
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
  
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
  
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
  
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
</tr>
  
<tr>
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
  
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
  
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
  
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
</tr>
<table>

使用html表，使用CSS，如何让表格彼此相邻？

2 个答案: