c# - Asp.net 表格宽度不超过 100%

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>

现在只要列太多，宽度就会固定为 100%，即使我没有 max-width 属性。单元格中的文本以多行结束。我希望它水平溢出 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>