Почему появляется лишний столбец при наведении курсора на мою таблицу? - PullRequest
Новая
       0

Почему появляется лишний столбец при наведении курсора на мою таблицу?

0 голосов
/ 29 мая 2018

Я создал таблицу с двумя столбцами.При наведении курсора мыши за столом справа появляется дополнительный столбец.Я не хочу, чтобы появился этот дополнительный столбец.Какие изменения мне нужно сделать здесь?

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>

Ответы [ 4 ]

0 голосов
/ 29 мая 2018

Я уменьшил свою проблему и исправил ее.Вот мой модифицированный код: 

<!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>
0 голосов
/ 29 мая 2018

Измените свой 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>
0 голосов
/ 29 мая 2018

На самом деле это не лишний столбец, а измененный цвет ячейки внешней таблицы.

измените .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>
0 голосов
/ 29 мая 2018

Это решит вашу проблему 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...