Column Resize CSS или HTML

У меня есть таблица, в которой я пытаюсь удалить интервал вокруг слова «МЕНЮ», но не увенчался успехом. Вот код, я использую:Column Resize CSS или HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
 
    <title>Peer Review</title> 
 
</head> 
 
<style type="text/css"> 
 
    #test { 
 
    transform: rotate(-90deg); 
 
    font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif; 
 
    font-size: 14pt; 
 
    color: black; 
 
    font-weight: bold; 
 
    margin: 0px 0px 0px 0px; 
 
    right: 0px; 
 
    padding: 0px 0px 0px 0px 
 
    } 
 
    table.nospacing { 
 
    border-spacing: 0; 
 
    } 
 
    table.nospacing th, 
 
    td { 
 
    padding: 0; 
 
    } 
 
</style> 
 

 
<body> 
 
    <table class="nospacing" style="border-style:none;background-color:aqua"> 
 
    <tr> 
 
     <td> 
 
     <ul> 
 
      <li>&nbsp;&nbsp;&nbsp;Review</li> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home</a> 
 
      </li> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;About</a> 
 
      </li> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contacts</a> 
 
      </li> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FAQs</a> 
 
      </li> 
 
     </ul> 
 
     <hr width="200px" /> 
 
     <ul style="position:relative"> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;Products</a> 
 
      </li> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;Report</a> 
 
      </li> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;Periodic</a> 
 
      </li> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;Guide</a> 
 
      </li> 
 

 
     </ul> 
 
     <ul> 
 
      <!-- #BeginEditable "redlines" --> 
 
      <li style="display:none"><a href="#">&nbsp;&nbsp;&nbsp;Redlines</a> 
 
      </li> 
 
      <!-- #EndEditable --> 
 
     </ul> 
 
     </td> 
 
     <td style="border-left:medium;border-left-color:white;border-left-style:solid"> 
 
     <p id="test">MENU</p> 
 
     </td> 
 

 
    </tr> 
 
    </table> 
 

 

 
</body> 
 

 
</html>

Как я могу сжать ширину правого столбца? Я пробовал установку прокладки, ширины и т. Д. Безрезультатно.

источник

2015-03-27 FlyFish

Пожалуйста, проверьте этот код, и если вам нужна какая-либо желаемая ширина, вы можете изменить максимальную ширину.

#test { 
 
    transform: rotate(-90deg); 
 
    font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif; 
 
    font-size: 14pt; 
 
    color: black; 
 
    font-weight: bold; 
 
    margin: 0px 0px 0px 0px; 
 
    right: 0px; 
 
    padding: 0px 0px 0px 0px 
 
    } 
 
    table.nospacing { 
 
    \t border-collapse: collapse; 
 
\t border-spacing: 0; 
 
    table-layout: fixed; 
 
    } 
 
    table.nospacing th, 
 
    td { 
 
    padding: 0; 
 
    } 
 
.menu-col{max-width: 30px;}

<table class="nospacing" style="border-style:none;background-color:aqua"> 
 
    <tr> 
 
     <td> 
 
     <ul> 
 
      <li>&nbsp;&nbsp;&nbsp;Review</li> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home</a> 
 
      </li> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;About</a> 
 
      </li> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contacts</a> 
 
      </li> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FAQs</a> 
 
      </li> 
 
     </ul> 
 
     <hr width="200px" /> 
 
     <ul style="position:relative"> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;Products</a> 
 
      </li> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;Report</a> 
 
      </li> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;Periodic</a> 
 
      </li> 
 
      <li><a href="#">&nbsp;&nbsp;&nbsp;Guide</a> 
 
      </li> 
 

 
     </ul> 
 
     <ul> 
 
      <!-- #BeginEditable "redlines" --> 
 
      <li style="display:none"><a href="#">&nbsp;&nbsp;&nbsp;Redlines</a> 
 
      </li> 
 
      <!-- #EndEditable --> 
 
     </ul> 
 
     </td> 
 
     <td class="menu-col" style="border-left:medium;border-left-color:white;border-left-style:solid"> 
 
     <p id="test">MENU</p> 
 
     </td> 
 

 
    </tr> 
 
    </table>

источник

2015-03-27 10:49:07 Kumar

Работает отлично! Спасибо за помощь !!! – FlyFish

вы приветствуете ... вы можете исправить ширину для одного td каждого ser через% или px – Kumar

Причиной этого является то, что ширина столбцов зависит от ширины столбца-контента (в вашем случае р-тег с «меню»). Ширина столбца просто игнорирует, что вы его повернули. Если вы хотите исправить это, вам нужно либо изменить ширину p-тега, либо установить максимальную ширину в столбце.

#test { 
    /* Your code */ 
    width: 40px; 
}

Но имейте в виду, что это будет «нецентрировать» текст меню. Чтобы заменить его, попробуйте transform: translateX.

источник

2015-03-27 10:59:58

Спасибо за объяснение. Приведенный выше код исправил проблему, и теперь я знаю, почему. – FlyFish

Column Resize CSS или HTML

ответ

Смежные вопросы