Question

我尝试寻找类似的问题，但找不到任何问题。我的aspx文件看起来像这样

<div align="center" style="height: 350px; overflow-y: scroll; overflow-x: scroll; width: 100%;">
    <asp:Table ID="tblReport" Font-Size="11px" runat="server" ViewStateMode="Enabled">
        <asp:TableHeaderRow Height="30px" ForeColor="#FFFFFF" BackColor="#3b3b3b" Style="font-weight: bold; text-align: left !important; padding-left: 3px; color: #FFF; border-right: 1px solid #ddeaf7;" HorizontalAlign="Center">
        </asp:TableHeaderRow>
    </asp:Table>
</div>

现在，每当列太多时，即使我没有max-width属性，宽度也会固定为100％。单元格中的文本以多行结尾。我希望它从div水平溢出。

编辑：看起来像添加了它最终解决了它。

td {
    white-space: nowrap;
}

Answer 1

用于演示的简单html代码段-

div {
  width: 10%;
  overflow: auto;
}

<div>
  <table>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
      <th>H</th>
      <th>I</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </table>
</div>

编辑-

您更新后的代码如下-

<div align="center" style="height: 350px; overflow: auto; width: 100%;">
    <asp:Table ID="tblReport" Font-Size="11px" runat="server" ViewStateMode="Enabled">
        <asp:TableHeaderRow Height="30px" ForeColor="#FFFFFF" BackColor="#3b3b3b" Style="font-weight: bold; text-align: left !important; padding-left: 3px; color: #FFF; border-right: 1px solid #ddeaf7;" HorizontalAlign="Center">
        </asp:TableHeaderRow>
    </asp:Table>
</div>

Asp.net表宽度不超过100％

1 个答案: