html - 列大小调整CSS或HTML | 列大小调整CSS或HTML

我有一个表，我试图删除单词“ MENU”周围的空格，但未成功。这是我正在使用的代码：

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

如何缩小右列的宽度？我尝试将填充，宽度等设置为无效。

最佳答案

请检查此代码，如果您需要任何所需的宽度，则可以更改最大宽度。

 #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-collapse: collapse;
	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>

关于html - 列大小调整CSS或HTML，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29298686/