无需使用overflow属性，实现div标签水平滚动及响应式表格

Hey folks, let's solve this problem step by step. You need to build a responsive table using only divs, add horizontal scrolling to the container, and avoid meta tags, CSS overflow, table-related HTML elements, and the table-layout property. Here's a practical solution that checks all those boxes:

The Approach #

Since we can't use native table tags or overflow, we'll use flexbox to mimic table structure (assuming flex is allowed—we're steering clear of table-related display properties) and JavaScript to handle horizontal scrolling (since we can't rely on CSS overflow for scrollbars).

HTML Structure #

We'll nest divs to create rows and cells, just like a table:

<div class="table-wrapper">
  <div class="table-row">
    <div class="table-cell">First Name</div>
    <div class="table-cell">Last Name</div>
    <div class="table-cell">Email</div>
    <div class="table-cell">Phone</div>
    <div class="table-cell">Full Address</div>
    <div class="table-cell">DOB</div>
    <div class="table-cell">Occupation</div>
  </div>
  <div class="table-row">
    <div class="table-cell">John</div>
    <div class="table-cell">Doe</div>
    <div class="table-cell">john.doe@example.com</div>
    <div class="table-cell">(555) 123-4567</div>
    <div class="table-cell">123 Main St, Anytown, USA 12345</div>
    <div class="table-cell">Jan 1, 1990</div>
    <div class="table-cell">Software Engineer</div>
  </div>
  <!-- Add as many rows as you need -->
</div>

CSS Styling #

We'll use flexbox to arrange cells into rows, add basic styling to make it look like a table, and ensure responsiveness:

/* Reset default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.table-wrapper {
  width: 100%;
  position: relative;
  border: 1px solid #ddd;
  cursor: grab;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.table-cell {
  flex: 0 0 auto; /* Prevent cells from shrinking too much */
  padding: 12px 15px;
  border-right: 1px solid #ddd;
  min-width: 180px; /* Ensures content doesn't get squished */
}

.table-cell:last-child {
  border-right: none;
}

/* Style the header row */
.table-row:first-child {
  background-color: #f5f5f5;
  font-weight: bold;
}

JavaScript for Scrolling #

Since we can't use CSS overflow, we'll add drag-to-scroll and wheel-to-scroll functionality so users can navigate horizontally:

const wrapper = document.querySelector('.table-wrapper');
let isDragging = false;
let startX;
let scrollLeft;

// Handle drag start
wrapper.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.pageX - wrapper.offsetLeft;
  scrollLeft = wrapper.scrollLeft;
  wrapper.style.cursor = 'grabbing';
});

// Stop dragging when mouse leaves or is released
wrapper.addEventListener('mouseleave', () => {
  isDragging = false;
  wrapper.style.cursor = 'grab';
});

wrapper.addEventListener('mouseup', () => {
  isDragging = false;
  wrapper.style.cursor = 'grab';
});

// Handle drag movement
wrapper.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  e.preventDefault();
  const x = e.pageX - wrapper.offsetLeft;
  const walk = (x - startX) * 2; // Adjust multiplier for scroll speed
  wrapper.scrollLeft = scrollLeft - walk;
});

// Enable horizontal scrolling with mouse wheel
wrapper.addEventListener('wheel', (e) => {
  e.preventDefault();
  wrapper.scrollLeft += e.deltaY;
});

How It All Comes Together #

• Table Structure: Flexbox arranges divs into rows and cells, creating a table-like layout without native table elements or table-related CSS.
• Responsiveness: The wrapper takes 100% width of its parent, so it adapts to any screen size. Cells have a minimum width to prevent content from being squished on small screens.
• Horizontal Scrolling: JavaScript adds drag and wheel support, letting users scroll horizontally without relying on CSS overflow.

Quick Notes #

• If flexbox was also off-limits (though the constraint mentioned "display tags" which likely refers to table-related display properties), we could use float: left on cells and clear floats on rows—but flexbox is far cleaner.
• This solution avoids all forbidden items: no meta tags, no CSS overflow, no table elements, no table-layout property.

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