table 中不规则间隔的列

Question

我正在尝试创建一个 table，它分为两个标题的部分；一个在上面，一个在下面。顶部将有 3 个标题和 3 个列 (<td>s)。第二个将有一个长标题、2 列和一个长页脚。我无法让底部的 2 列跨越 table 的长度（它们目前与上部的前 2 列对齐。

我试过使用 `colspan="1.5"（我的逻辑是如果 colspan="3"，那么一半会起作用）以及 width="550px;" （table 的全宽是 1000px）。关于我为实现这一目标所做的任何建议？代码如下（注意：这是一个 javascript 应用程序，它使用 DOM 节点动态创建 table；我只是使用内联 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>";

说清楚；这是我的目标：

Answer 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>

Answer 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>

Answer 3

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

请注意，第一个 table 是常规 table，表示每行的列数相同，第二个是不规则的。我将 table 包装在 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>

Answer 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>

table 中不规则间隔的列

Irregularly spaced columns in a table

html

css

html-table

spacing