Question

我想 1.根据构成它的 td 元素的最大长度（它将变化）调整第一列宽度。 2.想要为其他列设置固定宽度，以使其内容适合一行（即无包装）。

任何帮助将不胜感激。

<head>
<style type="text/css">

table {
table-layout: auto;
border-collapse: collapse;
width: 100%;
}
table td {
border: 2px solid green;
}

    .style2
    {
        height: 23px;
        <!--width: 100%;-->
    <!--     width: 500px;-->
    }
    .style3
    {
        height: 23px;
        width: 30px;
  <!--       width: 92px;-->
        font-size: xx-small;
    }
    .style4
    {
        height: 23px;
   <!--      width: 109px;-->
        font-size: xx-small;
        background-color: #CCCCCC;
    }
         .style5
        {
            width: 30%;
            height: 30px;
         }
         .style6
         {
            border-style: solid;
            border-width: 1px;
            padding: 1px 4px;
          }
         .style7
         {
            background-color: #CCCCCC;
         }
         .style8
         {
            height: 23px;
    <!--         width: 109px;-->
            background-color: #999999;
        }
        .style9
        {
            background-color: #999999;
        }
        .style10
        {
            height: 23px;
     <!--        width: 92px; -->
            background-color: #999999;
        }
        .style13
        {
            height: 23px;
     <!--        width: 92px;-->
            font-size: xx-small;
            background-color: #FFCCFF;
        }
        .style14
        {
            font-size: xx-small;
            background-color: #CCFF66;
        }
        .style18
        {
            font-size: xx-small;
            background-color: #CCCCCC;
        }
        .style19
        {
            height: 23px;
            width: 100%;
      <!--      width: 289px;-->
            font-size: small;
        }.

}

    </style>
</head>
<table style="height: 75px;" border="1">
<tbody>
<tr style="height: 23px;">
<td style="height: 23px;" colspan="10">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; AW Build</strong></td>
</tr>
<tr style="height: 23px;">
<th class="style2">&nbsp;Teams</th>
<td style="height: 23px;" colspan="3" class="style7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0512</td>
<td style="height: 23px;" colspan="3" class="style7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0511</td>
<td style="height: 23px;" colspan="3" class="style7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0512</td>
</tr>
<tr style="height: 23px;">
<td class="style19"><a href="http://localHost/SubLocation/index.html">AW-Consumer Packaged Good</a></td>
<td style="height: 23px;" class="style9">&nbsp;TC1121</td>
<td class="style10">TC1122</td>
<td style="height: 23px;" class="style9">TC113</td>
<td style="height: 23px;" class="style9">&nbsp;TC1121</td>
<td style="height: 23px;" class="style9">&nbsp;TC1122</td>
<td style="height: 23px;" class="style9">TC113</td>
<td style="height: 23px;" class="style9">TC1121</td>
<td style="height: 23px;" class="style9">TC1122</td>
<td class="style8">TC113</td>
</tr>
<tr style="height: 23px;">
<td class="style19"><a href="http://localhost/SubLocation/index.html">AW-User Management</a></td>
<td style="height: 23px;" class="style12">P-85 NAF-12 FF-3</td>
<td class="style13">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style12">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td class="style4">P-85 NAF-12 FF-3</td>
</tr>
<tr style="height: 23px;">
<td class="style19"><a href="http://localhost/SubLocation/index.html">Active Content Experience</a></td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td class="style15">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td class="style4">P-85 NAF-0 FF-7</td>
</tr>
<tr style="height: 23px;">
<td class="style19"><a href="http://localhost/SubLocation/index.html">Audit Subscription and License</a></td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td class="style15">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td class="style4">P-85 NAF-0 FF-7</td>
</tr>
</tbody>
</table>
<p>
    <br />
</p>

根据内容自动调整html表格

0 个答案: