Question

我正在尝试并排排列3张桌子。当我把一个表放在另一个表中时，它不起作用，因为中间表有很多内容，然后使我的第一个表垂直地太大而且看起来不正确。

我要做的是制作一个简单的页面，我的第一个表格有3行。我的第二个表只是一列，1行内容布局，我的第3个表也是1列和1行。我需要这些表并排。

我在网上搜索过，找不到任何能做到这一点的人。当我添加表格时，它们堆叠在一起。有人可以帮助我让我的3张桌子并排吗？

      <table width="100" border="1">
        <tr>
       <td>&nbsp;</td>
       </tr>
       <tr>
      <td>&nbsp;</td>
      </tr>
      <tr>
      <td>&nbsp;</td>
      </tr>
      </table>
      <table width="100" border="1">
      <tr>
      <td>&nbsp;</td>
      </tr>
      </table>
      <table width="100" border="1">
      <tr>
      <td>&nbsp;</td>
      </tr>
      </table>

如果这需要CSS编码，你也可以提供这个，我将非常感激，我还在学习高级CSS和HTML。

Answer 1

添加style =“float：left;”到每张桌子。例如：

<table width="100" border="1" style="float:left;">

Answer 2

（高级）CSS：

table{
 float:left;
}

Answer 3

如果你必须使用表格（并且你可以使用HTML电子邮件等），你应该能够使用嵌套表完成大部分工作。您是否尝试过使用一个包含三个单元格的包装表，然后将三个表分别放在包装表中的一个单元格中？ Dreamweaver是一个非常好的表格工具。如果这不是表格数据或HTML电子邮件，则应考虑不基于表格的布局。

Answer 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table width="900" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td rowspan="3">&nbsp;</td>
    <td rowspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

这个怎么样

Answer 5

由于CSS和Flexbox等发生了变化，因此有两种方法。

将所有表包装在div中。

<div class="main">
    <div id="table1">
        <table>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </table>
    </div>
    <div id="table2">
        <table>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </table>
    </div>
    <div id="table3">
        <table>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </table>
    </div>
</div>

然后在主类上使用flex显示，然后按如下所示调整内容：

.main {
    width: 1800px; //depending on how wide you want the table window
    min-height: 615px;  //same as width
    margin: 0 auto; //to center the content on your screen
    display: flex;
    justify-content: space-between;
}

这会将您的表分成一行。

另一个选择是使用css网格，但这里不再赘述。在线上有很多教程。

如何并排获得3张桌子

5 个答案: