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

【问题标题】：Why does an extra column appear when I hover my table?为什么当我悬停表格时会出现额外的列？
【发布时间】：2018-11-08 06:44:30
【问题描述】：

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

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>

【问题讨论】：

首先验证您的 html（例如，此处为 validator.w3.org）错误放置的标签可能会导致意外行为
尝试正确关闭所有标签。
你真的想要一张桌子里面的桌子吗？还是这是一个错误？
存在一些标签问题，现已修复。是的，我只想要一张桌子，修好了。

【解决方案1】：

这将解决您的问题

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

【讨论】：

【解决方案2】：

将您的 html 代码更改为类似的内容。

<table class="expCode">
  <tbody>
    <tr>
      <td>
        <table border="1" cellspacing="0" ; style="width:100%">
          <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>

【讨论】：

【解决方案3】：

它实际上并没有出现额外的列，它只是正在更改的外部表格单元格的颜色。

将 .expCode td:hover { 更改为 .expCode table td:hover { 以使规则仅影响内部表。

tr.even {
     background-color: #FFFFFF;
}
 tr.odd {
     background-color: #EEEEEE;
}
 .expand b{
     font-size:30px;
}
 .xhide {
}
 .expCode table 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>

【讨论】：

【解决方案4】：

我减少了我的问题并修复了它。这是我修改后的代码：

<!DOCTYPE html>
    <html lang="en">
        <head>
        <meta name="gwt:property" content="locale=en_US">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <style type="text/css">
    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%;  
    }

    </style>
        </head>
        <!-- comments only
        -->
        <body>


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

        </table>
    </body>

    </html>

【讨论】：

你做了什么来修复它？