使用 Div 的表结构答案

【问题标题】：Table Structure using Div使用 Div 的表结构
【发布时间】：2019-01-21 05:31:57
【问题描述】：

我想创建具有固定标题和自动表格宽度的垂直和水平滚动的表格。但这很难实现，这就是我尝试使用 div 来实现这一点的原因。我为此编写了以下代码。 My code

body {
  background: #20262E;
  padding: 20px;
  color:#fff;
  font-family: Helvetica;
}

.tableContainer{
  border:1px solid #fff;
  
}
.tableheader{
  font-weight:bold;
  border-bottom:1px solid #fff;
  position:relative;
  
}
.tableBody{
  max-height:150px;
  overflow-y:auto;
  padding-top:63px;
}
.tableheader .tablerow{
  display:table;
  background: red;
    width: 100%;
    position:absolute;
    
}
.tableheader .tablerow > div{
  padding:5px;
  display:table-cell;
  border-right:1px solid #fff;
    
}
.tableBody .tablerow{
  display:table;
}
.tableBody .tablerow > div{
  padding:5px;
  border-right:1px solid #fff;
  display:table-cell;
}

<div class="tableContainer">
  <div class="tableheader">
     <div class="tablerow">
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
  </div>
  <div class="tableBody">
     <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
      <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
  </div>
</div>

.tableContainer{ 边框：1px 实心#fff;

}
.tableheader{
  font-weight:bold;
  border-bottom:1px solid #fff;
  position:relative;

}
.tableBody{
  max-height:150px;
  overflow-y:auto;
  padding-top:63px;
}
.tableheader .tablerow{
  display:table;
  background: red;
    width: 100%;
    position:absolute;

}
.tableheader .tablerow > div{
  padding:5px;
  display:table-cell;
  border-right:1px solid #fff;

}
.tableBody .tablerow{
  display:table;
}
.tableBody .tablerow > div{
  padding:5px;
  border-right:1px solid #fff;
  display:table-cell;
}

现在我面临水平滚动和列宽的问题。

或者

这是我的另一个代码second code。在这段代码中，我遇到了水平滚动的问题。

请帮我解决这个问题。

【问题讨论】：

我一直觉得这很难做好，你可以看看使用 Datatables 一个用于表格的 Jquery 插件。它带有很多这样的功能，并且可以非常灵活。 datatables.net
Datatable 没有提供像 excel 这样的过滤器，这就是为什么我实现了简单的 HTML 表格但面临滚动问题。

标签： jquery html css scroll css-tables

【解决方案1】：

.tableheader 添加margin-right:17px;

17px 是滚动条宽度

【讨论】：

【解决方案2】：

您应该尝试这样的方法，这是表示完全响应式表格的最佳方式。

/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
  @media only screen and (min-width:1024px){
    tr:nth-child(odd) {
      background: #ccc;
    }
  }    
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    tr {
      margin: 0 0 1rem 0;
    }
      
    tr:nth-child(odd) {
      background: #ccc;
    }
    
		td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		td:nth-of-type(1):before { content: "First Name"; }
		td:nth-of-type(2):before { content: "Last Name"; }
		td:nth-of-type(3):before { content: "Job Title"; }
		td:nth-of-type(4):before { content: "Favorite Color"; }
		td:nth-of-type(5):before { content: "Wars of Trek?"; }
		td:nth-of-type(6):before { content: "Secret Alias"; }
		td:nth-of-type(7):before { content: "Date of Birth"; }
		td:nth-of-type(8):before { content: "Dream Vacation City"; }
		td:nth-of-type(9):before { content: "GPA"; }
		td:nth-of-type(10):before { content: "Arbitrary Data"; }
	}

<table role="table">
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader">First Name</th>
      <th role="columnheader">Last Name</th>
      <th role="columnheader">Job Title</th>
      <th role="columnheader">Favorite Color</th>
      <th role="columnheader">Wars or Trek?</th>
      <th role="columnheader">Secret Alias</th>
      <th role="columnheader">Date of Birth</th>
      <th role="columnheader">Dream Vacation City</th>
      <th role="columnheader">GPA</th>
      <th role="columnheader">Arbitrary Data</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell">James</td>
      <td role="cell">Matman</td>
      <td role="cell">Chief Sandwich Eater</td>
      <td role="cell">Lettuce Green</td>
      <td role="cell">Trek</td>
      <td role="cell">Digby Green</td>
      <td role="cell">January 13, 1979</td>
      <td role="cell">Gotham City</td>
      <td role="cell">3.1</td>
      <td role="cell">RBX-12</td>
    </tr>
    <tr role="row">
      <td role="cell">The</td>
      <td role="cell">Tick</td>
      <td role="cell">Crimefighter Sorta</td>
      <td role="cell">Blue</td>
      <td role="cell">Wars</td>
      <td role="cell">John Smith</td>
      <td role="cell">July 19, 1968</td>
      <td role="cell">Athens</td>
      <td role="cell">N/A</td>
      <td role="cell">Edlund, Ben (July 1996).</td>
    </tr>
    <tr role="row">
      <td role="cell">Jokey</td>
      <td role="cell">Smurf</td>
      <td role="cell">Giving Exploding Presents</td>
      <td role="cell">Smurflow</td>
      <td role="cell">Smurf</td>
      <td role="cell">Smurflane Smurfmutt</td>
      <td role="cell">Smurfuary Smurfteenth, 1945</td>
      <td role="cell">New Smurf City</td>
      <td role="cell">4.Smurf</td>
      <td role="cell">One</td>
    </tr>
    <tr role="row">
      <td role="cell">Cindy</td>
      <td role="cell">Beyler</td>
      <td role="cell">Sales Representative</td>
      <td role="cell">Red</td>
      <td role="cell">Wars</td>
      <td role="cell">Lori Quivey</td>
      <td role="cell">July 5, 1956</td>
      <td role="cell">Paris</td>
      <td role="cell">3.4</td>
      <td role="cell">3451</td>
    </tr>
    <tr role="row">
      <td role="cell">Captain</td>
      <td role="cell">Cool</td>
      <td role="cell">Tree Crusher</td>
      <td role="cell">Blue</td>
      <td role="cell">Wars</td>
      <td role="cell">Steve 42nd</td>
      <td role="cell">December 13, 1982</td>
      <td role="cell">Las Vegas</td>
      <td role="cell">1.9</td>
      <td role="cell">Under the couch</td>
    </tr>
  </tbody>
</table>

【讨论】：

请检查这个例子jsfiddle.net/vedankita/extynaqf面临水平滚动问题
嗨@CodeBlaze 列在我添加多列时会缩小，水平滚动不来。请检查此jsfiddle.net/vedankita/zLokhuqd/2
您可以防止滚动或缩小列。你不能同时实现两者。