Question

我需要一个带滚动的tbody，thead不应该有滚动。因此，在这样做时，thead的宽度减小到thead中文本的大小。

有没有办法让thead宽度大小与tbody相同

这就是我所拥有的。 https://jsfiddle.net/Viraj173/jqwgkq8k/

CSS

tbody.scroll{
  overflow-y: auto;
  height:100px;        
 position: absolute;
}

th {
    color: #ffffff;
    background: #373d49;
    padding: 5px;
    text-align: left;
    font-size: 14px;
}

HTML

<table >
  <thead>
      <tr>
        <th>
          Value
        </th>
      </tr>                             
  </thead>
  <tbody class="scroll">
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>
    <tr>
      <td>
        Setting Value 1
      </td>
    </tr>

  </tbody>
</table>

Answer 1

是的，您可以在<th>部分的<thead>标记中指定宽度值。试试这个：

<thead>
      <tr>
        <th width="108px" >
          <center> Value</center>
        </th>
      </tr>                       
  </thead>

像这样：http://codepen.io/anon/pen/QdgJbg

或者您可以像这样编辑css：

 tbody.scroll{
      overflow-y: auto;
      height:20vh;        
      position: relative;
      display: block;
    }

    th {
        color: #ffffff;
        background: #373d49;
        padding: 5px;
        width:110px;
        text-align: left;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        font-size: 14px;
        wight:20vh;
    }

http://codepen.io/anon/pen/dNRwWW

Answer 2

使用它：

 th {
    color: #ffffff;
    background: #373d49;
    padding: 5px;
    padding-right:100px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}

Answer 3

这是在我修改代码

之后

tbody.scroll{
  overflow-y: auto;
  height:20vh;        
  position: relative;
  display: block;
}

https://jsfiddle.net/5ya1c55x/

thead的宽度与tbody不同

3 个答案: