Question

我已经看到了这个主要话题how do I create an HTML table with fixed/frozen left column and scrollable body?，我试图适应，但由于我使用thead和tbody标签并且没有一个例子，我经常失败。

thead由该月的日期组成，tbody具有雇主名称。

<table>
  <thead>
    <tr>
      <th></th>
      <th>01 July</th>
      <th>02 July</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Employee 1</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Employee 2</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

在横向滚动时，我需要包含要修复的雇主名称的td。

JSFiddle example

Answer 1

您可以使用position:fixed

实现此目的（使用您在问题中提供的标记）

table {
position: relative;
left: -10px;
}

thead tr th:nth-of-type(1),
tbody tr td:nth-of-type(1) {
display: block;
position: fixed;
z-index: 6;
width: 100px;
height: 20px;
background-color: rgb(255,255,255);
}

th, td:nth-of-type(n+2) {
min-width: 80px;
text-align:center;
}

th:nth-of-type(2),
td:nth-of-type(2) {
padding-left: 104px;
}

<table class="table table-hover">
  <thead>
    <tr>
      <th></th>
      <th>01 July</th>
      <th>02 July</th>
      <th>03 July</th>
      <th>04 July</th>
      <th>05 July</th>
      <th>06 July</th>
      <th>07 July</th>
      <th>08 July</th>
      <th>09 July</th>
      <th>10 July</th>
      <th>11 July</th>
      <th>12 July</th>
      <th>13 July</th>
      <th>14 July</th>
      <th>15 July</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Employee 1</td>
      <td></td>
      <td></td>
      <td></td>
      <td>Vacation</td>
      <td>Vacation</td>
      <td>Vacation</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Employee 2</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>Vacation</td>
      <td>Vacation</td>
      <td>Vacation</td>
    </tr>
  </tbody>
</table>

Answer 2

请检查以下代码。

th, td {
	white-space: nowrap; border:1px solid #ccc; padding:5px 0;
}

.first-col {
  position: absolute;
	width: 5.6em;
	margin-left: -5.7em; background:#ffffff;
}

.table-wrapper {
    overflow-x: scroll;
	width: 430px;
	margin: 0 0 0 5.3em;
}

<div class="container">
    <div class="table-wrapper">
        <table class="table table-bordered table-striped table-hover" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th class="first-col">&nbsp;</th>
                    <th>Table heading1</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
					<th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
					<th>Table heading</th>
					<th>Table heading</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="first-col">Employee1</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
					<td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                </tr>
                <tr>
                    <td class="first-col">Employee2</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
					<td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

这是否是你想要的？

CSS修复了表

2 个答案: