Question

我创建了一个包含两列的表。将鼠标悬停在桌子外面时，右侧会显示一个额外的列。我不希望出现额外的列。我需要在这做什么改变？

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>

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

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

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

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

为什么我悬停桌子时会出现一个额外的列？

4 个答案: