2

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

我要做的是制作一个简单的页面，在其中我的第一个表格有 3 行。我的第二张表只是 1 列、1 行的内容布局，我的第三张表也是 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。

4

5 回答 5

10

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

<table width="100" border="1" style="float:left;">
于 2012-07-01T15:48:53.310 回答
1

（高级）CSS：

table{
 float:left;
}
于 2012-07-01T15:49:14.130 回答
1

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

于 2012-07-01T15:52:43.183 回答
0 
<!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>

这个怎么样

于 2013-04-27T22:58:03.897 回答
0

由于 CSS 和 Flexbox 等发生了变化。有几种方法。

  1. 将所有表格包装在一个 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显示，然后justify-content如下：

.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;
}

这会将您的表格分隔在一行中。

  1. 另一种选择是使用 css 网格，但不会在这里讨论。网上有很多教程。
于 2020-02-28T10:44:19.840 回答