html - 二、固定立柱工作台

Question

我正在尝试创建一个两个固定列表(卡住前两列)，它尊重我给它们的 td 元素的宽度。

当两列固定后，列的宽度是随机设置的。

<div id="tableContainer">
<table class="all-table">
                    <colgroup>
                    <col  style="width:30px;" />
                    <col  style="width:30px;" />
                    <col style="width:180px;" />
                    <col style="width:180px;" />
                    <col style="width:180px;" />
                    <col style="width:30px;" />
                </colgroup>
<thead>
<tr>
    <td class="td-fixed gray-background">a</td>
    <td class="td-fixed td-fixed-margin gray-background">a</td>
    <td class="gray-background">aaaaaaaaaaaa</td>
    ...
</tr>
    ...
    </thead>
<tbody>
    <tr>
    <td class="td-fixed white-background">a</td>
    <td class="td-fixed td-fixed-margin white-background" >a</td>
    <td>aaaaaaaaaaaa</td>
    ...
    </tr>
        <tr>
    <td class="td-fixed white-background">a</td>
    <td class="td-fixed td-fixed-margin white-background">a</td>
    <td >aaaaaaaaaaaa</td>
    ...
</tr>
    ...
</tbody>
</table>
</div>

CSS部分可以在链接中找到。

http://jsfiddle.net/pcmhd42e/8/

http://jsfiddle.net/pcmhd42e/9/ - 来自 gewh 的更新版本

找不到适用于 CSS 的解决方法，该解决方案不使用 Bootstrap。

Answer 1

我不确定正确的方法，但这可能会有所帮助。

#tableContainer {
  width: 300px;
  overflow: auto;
  overflow-y: scroll;
}
.td-fixed {
  position: fixed;
  left: 0px;
  width: 30px;
  z-index: 1;
  height: 25px;
}
.white-background {
  background-color: white;
}
.gray-background {
  background-color: gray;
}
.td-fixed-margin {
  margin-left: 31px;
}
.td-fixed-padding {
  padding-left: 31px;
}
.all-table {
  width: 300px;
  margin-top: 0;
  table-layout: fixed;
  border-spacing: 0;
}
td {
  border-right: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  height: 25px;
  padding: 0;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.td-editable-position {
  left: 148px;
  position: relative;
}

<div id="tableContainer">
  <table class="all-table">
    <colgroup>
      <col style="width:54px;" />
      <col style="width:180px;" />
      <col style="width:180px;" />
      <col style="width:180px;" />
      <col style="width:30px;" />
    </colgroup>
    <thead>
      <tr>
        <td class="td-fixed gray-background">a</td>
        <td class="td-fixed td-fixed-margin gray-background">a</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
      </tr>
      <tr>
        <td class="td-fixed gray-background">a</td>
        <td class="td-fixed td-fixed-margin gray-background">a</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
        <td class="gray-background">aaaaaaaaaaaa</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin white-background">a</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
      </tr>
      <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin white-background">a</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
      </tr>
      <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin white-background">a</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
      </tr>
      <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin white-background">a</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
      </tr>
      <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin white-background">a</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
      </tr>
    </tbody>
  </table>
</div>