表格中不规则间距的列答案

【问题标题】：Irregularly spaced columns in a table表格中不规则间距的列
【发布时间】：2021-04-30 07:29:45
【问题描述】：

我正在尝试创建一个表格，该表格分为具有 2 个标题的部分；一个在顶部，一个在底部。顶部将有 3 个标题和 3 列 (<td>s)。第二个将有一个长标题、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>";

要清楚；这是我的目标：

【问题讨论】：

不应该是 colspan='2' ？
不幸的是，这使得第一列有 2 列宽（与上部的第二列对齐），而第二列仅与上部的第三列对齐。
您还必须为第一列的行添加 colspan='1'
不；结果和上面一样。
请显示呈现的 HTML 而不是不运行的 JavaScript 语句。

标签： html css html-table spacing

【解决方案1】：

这里的一种简单方法是为不同行中的不同单元格添加适当的 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>

【讨论】：

这个解决方案不是我想要的。我在原始帖子的底部添加了一张额外的图片来说明我需要什么。基本上我希望底部 2 列的大小均匀并在表格的中间中断。
请注意，主题开始使用<table width=100%> 如果使用边距、填充或边框，这将导致表格大于 100%。通过仅使用 table, table * { box-sizing: border-box; } 或一般 * { box-sizing: border-box; } 的填充和/或边框来避免这种情况
我更新了我的例子，还有其他方法
是的！使 colspan=6 并相应地划分就可以了。谢谢！

【解决方案2】：

请试试这个。如果您希望将 css 用作内联 style="..."，请以您喜欢的方式进行更改。

#table2 {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}
#table2 tr {
    width: 100%;
}
#table2 th, #table2 td {
    box-sizing: border-box;
    border: 1px solid grey;
}
#table2 th {
    background-color: yellow;
}

<table id='table2'>
    <tr>
        <th width="33%"><b>Flood Event</b></th>
        <th width="33%"><b>Estimated Flood Depth*</b></th>
        <th width="33%"><b>Estimated Base Flood Elevation*</b></th>
    </tr>
    <tr>
        <td>0.2 Percent (500 Year)</td>
        <td>14.5 feet above land surface</td>
        <td>496.4 feet NAVD 1988</td > 
    </tr>
    <tr>
        <td>0.2 Percent (500 Year)</td>
        <td>14.5 feet above land surface</td>
        <td>496.4 feet NAVD 1988</td > 
    </tr>
    <tr>
        <th colspan="3"><b>Probability of Flooding </b></th>
        <th style="display: none;" width='0%'></th> 
        <th style="display: none;" width='0%'></th> 
    </tr>
    <tr>
        <td colspan="2" width='50%'>0.2 Percent (500 Year)</td>
        <td width='50%'>14.5 feet above land surface</td> 
        <td style="display: none;" width='0%'></td> 
    </tr>
    <tr>
        <td colspan="2" width='50%'>0.2 Percent (500 Year)</td>
        <td width='50%'>14.5 feet above land surface</td>
        <td style="display: none;" width='0%'></td> 
    </tr>
    <tr width=100%>
        <td colspan='3' width=100%>
        <p style='font-size: 10px; text-align:center;'>*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>
        <td style="display: none;" width='0%'></td> 
        <td style="display: none;" width='0%'></td> 
    </tr>
</table>

【讨论】：

【解决方案3】：

通过查看您的图像，很明显您需要在两个表格中表示您的数据。上下文很重要，您有两个标题用于识别每一行中的信息。

注意第一个表是规则表，意思是每行列数相同，第二个是不规则表。我已经用 HTML5 语法包装了表格，并使用 CSS 来提供您在图像中的目标外观。

table, tr, td {
  text-align: center;
}

td, th {
  padding: 0.5rem 0;
}

table {
  width: 100%;
}

th {
  background-color: #0A4386;
  color: white;
}

.regular-table {
  border-bottom: 0;
}

.irregular-table {
  border-top: 0;
}

.footer {
  font-size: 12px
}

<table class="regular-table" border="1" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th colspan="2">first header</th>
        <th colspan="2">second header</th>
        <th colspan="2">third header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="2">first content</td>
        <td colspan="2">second content</td>
        <td colspan="2">third content</td>
      </tr>
    </tbody>
</table>

<table class="irregular-table" border="1" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th colspan="12">some header message goes here</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="6">first content</td>
        <td colspan="6">second content</td>
      </tr>
      <tr class="footer">
        <td colspan="12">* some long overdue footer content goes here</td>
      </tr>
    </tbody>
</table>

【讨论】：

【解决方案4】：

您可以使用灵活的方式，没有 colspan 或 table 相关的结构问题。

请注意，如果您在 html 中忽略了 <tbody>，浏览器会包含它。所以总是包含 tbody。

只需指定max-width 即可指定每列的宽度。就是这样。

table, tr {
  display: flex;
  width: 100%;
}
tbody, th, td {
  display: block;
  flex: 0 0 100%;
  width: 100%;
}
th, td {
  box-sizing: border-box;
  border: 1px solid grey;
  font: normal 14px/1.4 sans-serif;
}
th {
  background-color: blue;
  color: white;
}

<table id='table2' style='max-width: 100%'>
  <tbody>
    <tr>
      <th style='max-width: 33%'><b>Flood Event</b></th>
      <th style='max-width: 33%'><b>Estimated Flood Depth*</b></th>
      <th style='max-width: 34%'><b>Estimated Base Flood Elevation*</b></th>
    </tr>
    <tr>
      <td style='max-width: 33%'>0.2 Percent (500 Year)</td>
      <td style='max-width: 33%'>14.5 feet above land surface</td>
      <td style='max-width: 34%'>496.4 feet NAVD 1988</td > 
    </tr>
    <tr>
      <td style='max-width: 33%'>0.2 Percent (500 Year)</td>
      <td style='max-width: 33%'>14.5 feet above land surface</td>
      <td style='max-width: 34%'>496.4 feet NAVD 1988</td > 
    </tr>
   <tr>
      <th style='max-width: 100%'><b>Probability of Flooding </b></th>
    </tr>
    <tr>
      <td style='max-width: 50%'>0.2 Percent (500 Year)</td>
      <td style='max-width: 50%'>14.5 feet above land surface</td> 
    </tr>
    <tr>
      <td style='max-width: 50%'>0.2 Percent (500 Year)</td>
      <td style='max-width: 50%'>14.5 feet above land surface</td>
    </tr>
    <tr>
      <td style='max-width: 100%'>
      <p style='font-size: 10px; text-align:center;'>*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>
  </tbody>
</table>

【讨论】：