时间戳

首页 > 解决方案 > 为什么当我悬停表格时会出现额外的列？

html - 为什么当我悬停表格时会出现额外的列？

问题描述

我创建了一个包含两列的表。将鼠标悬停在表格外时，右侧会出现一个额外的列。我不希望出现那个额外的列。我需要在这里进行哪些更改？

tr.even {
     background-color: #FFFFFF;
}
 tr.odd {
     background-color: #EEEEEE;
}
 .expand b{
     font-size:30px;
}
 .xhide {
}
 .expCode td:hover {
    background-color: #ddd;
}
 .expCode th {
     padding-top: 12px;
     padding-bottom: 12px;
     text-align: center;
     font-size:16px;
     background-color: #276B8E;
     color: #FFFFFF;
}
 table{
     border-color:grey;
     display:table;
     width:75%;
}
<table class="expCode">
  <tbody>
    <tr>
      <td>
        <table border="1" cellspacing="0"; style="width:75%">
          <thead>
            <tr>
              <th style="width:25%">Column1</th>
              <th style="width:50%">Column2</th>
            </tr>
          </thead>
          <tbody>
            <tr class="even">
              <td>Text</td>
              <td><p>Text</p></td>
            </tr>
            <tr class="odd">
              <td> Text</td>
              <td><p>Text</p></td>
            </tr>
            <tr class="even">
              <td>Text</td>
              <td><p>Text</p></td>
            </tr>       
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

标签： htmlcsshtml-table

解决方案

这将解决您的问题

<table class="expCode" border="1" cellspacing="0"; style="width:75%">
     <thead>
        <tr>
           <th style="width:25%">Column1</th>
           <th style="width:50%">Column2</th>
        </tr>
     </thead>
     <tbody>
        <tr class="even">
           <td>Text</td>
           <td>
              <p>Text</p>
        </tr>
        <tr class="odd">
           <td> Text</td>
           <td>
              <p>Text</p>
           </td>
        </tr>
        <tr class="even">
           <td>Text</td>
           <td>
              <p>Text</p>
           </td>
        </tr>
     </tbody>
</table>

推荐阅读