我需要一个带滚动的肢体,而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>

最佳答案

用这个:

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

关于css - thead的宽度不同于tbody,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41825841/

10-12 02:31