18910140161

Html

首页 >> 前端开发 >> Html

CSS禁用的HTML按钮显示在粘稠的表头顶部，活动按钮不是-堆栈溢出

顺晟科技

2022-10-19 11:28:46

58

我正在使用bootstrap 5作为我的框架开发一个网站。 我的问题如标题所述。在我的页面上向下滚动并将表头保持在顶部时，禁用按钮将显示表头的顶部。

我已尝试使用禁用的属性和类名（用于引导）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped align-middle mx-auto">
  <thead>
    <tr style="position: sticky; top: 0; background-color: white;">
      <th scope="col" style="position: sticky; top: 0; background-color: white;">Date</th>
      <th scope="col" style="position: sticky; top: 0; background-color: white;">Agenda</th>
      <th scope="col" style="position: sticky; top: 0; background-color: white;">Meeting Minutes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr><tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>

顺晟科技：

将此添加到您的，

为了避免在按钮以外的其他元素中发生这种情况，另一个解决方案是使顶部标头栏始终位于表的上方。

所以不是将禁用按钮向下拉一级，而是将顶栏向上拉一级:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped align-middle mx-auto">
  <thead>
    <tr style="position: sticky; top: 0; background-color: white;">
      <th scope="col" style="position: sticky; top: 0; background-color: white;">Date</th>
      <th scope="col" style="position: sticky; top: 0; background-color: white;">Agenda</th>
      <th scope="col" style="position: sticky; top: 0; background-color: white;">Meeting Minutes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr><tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>
    <tr>
      <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
      <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
      <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
    </tr>

（您还可以向元素添加类并直接针对元素，这对您来说是最容易的。

  • TAG：
上一篇：javascript-html/cs 下一篇：javascript-js:addC
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！