css/table/tab 标签栏边框重叠选中时高亮(样本)

原创于 2020-06-03 18:42:27 发布 · 882 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #vue.js #web #javascript

import this 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了一种使用HTML和CSS实现动态表格样式的具体方法。通过实例代码展示了如何为表格头部的不同列设置独特的样式，如改变边框颜色，并通过Vue.js实现了列头点击切换效果。这不仅提升了表格的视觉体验，还增强了交互性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
默认选中

    tableA: 0,

html

      <table class="test-table" cellspacing="0">
        <thead>
          <tr>
            <th
              v-for="(v,i) in ['全部监控','全部监控','全部监控','全部监控','全部监控']"
              :key="i"
              @click="tableA=i"
              :class="tableA==i?'adidas':(tableA-1)==i?'nike':''"
            >{{v}}</th>
          </tr>
        </thead>
      </table>

css

  .test-table {
    margin-top: 50px;
    border-collapse: collapse;
    th {
      padding: 5px 10px;
      border: 1px solid lightgray;
    }
    .adidas {
      border-color: red;
    }
    .nike {
      border-right-color: red;
    }
  }