时间戳

首页 > 解决方案 > 表格中不规则间距的列

html - 表格中不规则间距的列

问题描述

我正在尝试创建一个表格，该表格分为具有 2 个标题的部分；一个在顶部，一个在底部。顶部将有 3 个标题和 3 列<td>。第二个将有一个长标题、2 列和一个长页脚。我无法让底部的 2 列跨越表格的长度（它们当前与上部的前 2 列对齐。 在此处输入图像描述

我试过使用 `colspan="1.5" （我的逻辑是如果 colspan="3"，那么一半会起作用）以及 width="550px;" （表格的全宽为 1000px）。关于我为实现这一目标所做的任何建议？代码如下（注意：这是一个使用 DOM 节点动态创建表的 javascript 应用程序；我现在只是使用内联 css 将其放入其中）。

supplemental_dialog.innerHTML = "<h6>Map Date: " + this_date + "</h6>" + 
        "<div class='row' style='height:100px;'>" +
        "<div><h5>Location Information</h5>" +
        "<table id='table2' width=100%>" +
        "<tr width=100%>" +
        "<th><b>Flood Event</b></th>" + "<th><b>Estimated Flood Depth*</b></th>" + "<th><b>Estimated Base Flood Elevation*</b></th>" +
        "</tr>" +
        "<tr width=100%>" +
        "<td width=33%>0.2 Percent (500 Year)</td><td width=33%>" + "14.5 feet above land surface" + "</td>" + "<td width=33%>" + "496.4 feet NAVD 1988" + "</td > " +
        "</tr>" +
        "<tr width=100%>" +
        "<td width=33%>0.2 Percent (500 Year)</td><td width=33%>" + "14.5 feet above land surface" + "</td>" + "<td width=33%>" + "496.4 feet NAVD 1988" + "</td > " +
        "</tr>" +
        "<tr width=100%>" +
        "<td width=33%>0.2 Percent (500 Year)</td><td width=33%>" + "14.5 feet above land surface" + "</td>" + "<td width=33%>" + "496.4 feet NAVD 1988" + "</td > " +
        "</tr>" +
        "<tr width=100%>" +
        "<td width=33%>0.2 Percent (500 Year)</td><td width=33%>" + "14.5 feet above land surface" + "</td>" + "<td width=33%>" + "496.4 feet NAVD 1988" + "</td > " +
        "</tr>" +
        "<tr width=100%>" +
        "<th colspan='3' width=100% style='text-align:center'><b>Probability of Flooding </b></td>" +
        "</tr>" +
        "<tr width=100%>" +
        "<td width='500px'>0.2 Percent (500 Year)</td><td width='500px'>" + "14.5 feet above land surface" + "</td>" + 
        "</tr>" +
        "<tr width=100%>" +
        "<td width='500px'>0.2 Percent (500 Year)</td><td width='500px'>" + "14.5 feet above land surface" + "</td>" +
        "</tr>" +
        "<tr width=100%>" +
        "<td colspan='3' width=100%><p style='font-size: 10px;'>*The information included in this report is based on the entire building footprint, or, if clicked outside of a building footprint, based on the point clicked on the map.  Results are not considered an official determination.</p></td>" +
        "</tr>" +
        "</table></div > " +
        "</div>";

要清楚；这是我的目标： 在此处输入图像描述

标签： htmlcsshtml-tablespacing

解决方案

一种简单的方法是为不同行中的不同单元格添加适当的 colspan 值，请参见示例：

<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <table>
    <tr>
      <th colspan="2">first col</th>
      <th colspan="2">second col</th>
      <th colspan="2">third col</th>
    </tr>
    <tr>
      <td colspan="2">a</td>
      <td colspan="2">b</td>
      <td colspan="2">c</td>
    </tr>
    <tr>
      <td colspan="3">d</td>
      <td colspan="3">e</td>
    </tr>
    <tr>
      <td colspan="6">f</td>
    </tr>
  </table>

</body>

</html>

推荐阅读