我想用固定的标题和表格宽度自动创建垂直和水平滚动的表格。但这很难实现，这就是为什么我尝试使用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 { 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;
}
现在，我面临着水平滚动和列宽的问题。
或
这是我的另一个代码second code。在这段代码中，我面临着水平滚动的问题。
请帮助我。
答案 0 :(得分：0)
.tableheader添加margin-right：17px;
17px是滚动条witdh
答案 1 :(得分：0)
您应该尝试类似的方式，这是表示完全响应表的最佳方法。
/*
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>