如何实现文本/对象覆盖表格列/边框的表格效果？

Got it, let's recreate that clean "text floating above table columns/borders" effect you saw on the Korean Meteorological Administration site. This pattern is perfect for grouping related columns or adding context without cluttering the table itself, and it's straightforward with HTML + CSS.

Method 1: Absolute Positioning (For Traditional Tables) #

This works best if you want to stick with a standard <table> element. We'll use a relative container to anchor our floating labels, then position them precisely above target columns.

HTML Structure #

First, wrap your table in a container, and add elements for the labels you want to place above columns:

<div class="table-container">
  <!-- Floating column labels -->
  <div class="column-label label-1">Morning</div>
  <div class="column-label label-2">Afternoon</div>
  <div class="column-label label-3">Evening</div>

  <!-- Your table -->
  <table class="weather-table">
    <thead>
      <tr>
        <th>Time</th>
        <th>6 AM</th>
        <th>9 AM</th>
        <th>12 PM</th>
        <th>3 PM</th>
        <th>6 PM</th>
        <th>9 PM</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Temperature</td>
        <td>15°C</td>
        <td>18°C</td>
        <td>22°C</td>
        <td>24°C</td>
        <td>20°C</td>
        <td>17°C</td>
      </tr>
      <!-- Add more rows as needed -->
    </tbody>
  </table>
</div>

CSS Styling #

We'll fix table column widths, set the container to relative positioning, and absolutely position our labels above the correct columns:

.table-container {
  position: relative;
  margin-top: 30px; /* Make space for floating labels */
  width: fit-content;
}

.weather-table {
  border-collapse: collapse;
  border: 1px solid #ccc;
}

.weather-table th, .weather-table td {
  width: 80px; /* Fixed width for consistent alignment */
  padding: 8px;
  text-align: center;
  border: 1px solid #ccc;
}

/* Style floating column labels */
.column-label {
  position: absolute;
  top: -25px; /* Move label above the table */
  padding: 4px 8px;
  background: #f0f4f8;
  border: 1px solid #ccc;
  border-bottom: none; /* Hide bottom border to connect seamlessly with table */
  font-weight: bold;
}

/* Position labels over target column groups */
.label-1 {
  left: 81px; /* Align with first column after "Time" (80px width + 1px border) */
  width: 160px; /* Cover 2 columns (80px * 2) */
  text-align: center;
}

.label-2 {
  left: 242px; /* Calculate based on previous columns + borders */
  width: 160px;
  text-align: center;
}

.label-3 {
  left: 403px;
  width: 160px;
  text-align: center;
}

How It Works #

• The .table-container is set to position: relative so our absolute-positioned labels anchor to it instead of the entire page.
• Fixed column widths ensure labels align perfectly with their target columns, no matter the content inside.
• We adjust the left value for each label to match the starting position of the column group, and set width to cover the number of columns we want the label to span.

Method 2: CSS Grid (More Flexible) #

If you want more control over spacing and responsiveness, using CSS Grid to simulate the table is a great alternative. You can directly place labels in the grid cells above your table columns without manual positioning calculations:

HTML + CSS Example #

<div class="grid-table">
  <!-- Grid labels -->
  <div class="grid-label">Morning</div>
  <div class="grid-label">Afternoon</div>
  <div class="grid-label">Evening</div>

  <!-- Grid headers -->
  <div class="grid-cell header">Time</div>
  <div class="grid-cell header">6 AM</div>
  <div class="grid-cell header">9 AM</div>
  <div class="grid-cell header">12 PM</div>
  <div class="grid-cell header">3 PM</div>
  <div class="grid-cell header">6 PM</div>
  <div class="grid-cell header">9 PM</div>

  <!-- Grid content -->
  <div class="grid-cell">Temperature</div>
  <div class="grid-cell">15°C</div>
  <div class="grid-cell">18°C</div>
  <div class="grid-cell">22°C</div>
  <div class="grid-cell">24°C</div>
  <div class="grid-cell">20°C</div>
  <div class="grid-cell">17°C</div>
</div>

.grid-table {
  display: grid;
  grid-template-columns: 80px repeat(6, 80px); /* 1 header column + 6 data columns */
  gap: 1px;
  background: #ccc;
  margin-top: 10px;
}

.grid-label {
  grid-column: span 2; /* Each label spans 2 columns */
  padding: 4px;
  background: #f0f4f8;
  text-align: center;
  font-weight: bold;
}

/* Adjust first label to start at column 2 */
.grid-label:first-child {
  grid-column: 2 / span 2;
}

.grid-cell {
  background: white;
  padding: 8px;
  text-align: center;
}

.grid-cell.header {
  font-weight: bold;
  background: #f8f9fa;
}

This method is easier to tweak later—if you need to add/remove columns, just adjust the grid-template-columns value, and the labels will automatically reposition.

Key Tips for Matching the KMA Site #

• Use subtle borders and muted background colors for the floating labels to match the site's clean, professional look.
• Ensure labels are centered over their target columns for a polished appearance.
• For responsive design, use media queries to adjust column widths or stack elements on smaller screens.

内容的提问来源于stack exchange，提问作者doomhaMwx