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

在CSS中使用position规则时，top left right和bottom值是定位这些元素的方法。

I hope this updated fiddle is more what you are after?

Answer 2

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 3

如果您使用的是jQuery，我建议您使用Sticky Table插件。您只需要使用他们的类来执行您想要的操作而无需更改代码结构或添加任何糟糕的JS代码。

Answer 4

下面的代码对我有用。 btw 4列：

org.springframework.web.bind.MissingServletRequestParameterException: Required String parameter 'participants' is not present
    at org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.handleMissingValue(RequestParamMethodArgumentResolver.java:204)
    at org.springframework.web.method.annotation.AbstractNamedValueMethodArgumentResolver.resolveArgument(AbstractNamedValueMethodArgumentResolver.java:112)
    at org.springframework.web.method.support.HandlerMethodArgumentResolverComposite.resolveArgument(HandlerMethodArgumentResolverComposite.java:124)
    at org.springframework.web.method.support.InvocableHandlerMethod.getMethodArgumentValues(InvocableHandlerMethod.java:161)

.view {
    width: fit-content;
    overflow-x: initial;
}

.wrapper {
    position: relative;
    white-space: nowrap;
    padding: 0px;
}

.sticky-col {
    position: sticky;
    /* border: 1px solid red !important; */
    position: -webkit-sticky;
    background-color: white !important;
    text-align: center;
}

.first-col {
    width: 50px;
    text-align: center;
    left: 0px;
}

.second-col {
    width: 50px;
    left: 50px;
}

.third-col {
    width: 50px;
    left: 100px;
}

.fourth-col {
    width: 50px;
    left: 147px;
}

.fifth-col {
    width: 150px;
    left: 200px;
}

两个固定的列表

4 个答案: