Spread表格控件如何做到自适应高度?

收藏

Hi  iceman:

请问个问题，Spread表格控件如何做到表格的高度自适应？
比如，我有一个Table,有三行，第一行设置为：20%,第二行设置20%,第三行设置为60%,在第三行中，我放置一个Spread控件，高度设置为100%.
这样，不能实现整个表格的自适应，但是我放置其他的控件（如，微软自带的GridView控件），是可以达到这种效果的。
请帮忙调试下（火狐浏览器）。

具体的代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="SpreadDemo.WebForm5" %>
<%@ Register Assembly="FarPoint.Web.Spread" Namespace="FarPoint.Web.Spread" TagPrefix="FarPoint" %>
<!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 runat="server">
<title></title>
<style type="text/css">
      html {height:100%;}
      body {margin:0; padding:0; height:100%;}
</style>
</head>
<body>
<form id="form1" runat="server" style="height: 100%; width: 100%">

      <table style="height: 100%; width: 100%; border-width: 2px; border-color: red" border="1px">
         <tr>
            <td style="height:20%">
                  <table style="height: 100%; width: 100%">
                     <tr>
                        <td>
                              <input id="Button2" type="button" value="button" />
                        </td>
                     </tr>
                  </table>
            </td>
         </tr>
         <tr>
            <td style="height:20%">
            <table style="height: 100%; width: 100%">
                     <tr>
                        <td>
                              <input id="Button1" type="button" value="button" />
                        </td>
                     </tr>
                  </table>
            </td>
         </tr>
         <tr>
            <td style="height:60%">
               <table style="height: 100%; width: 100%">
                     <tr>
                        <td style="height: 100%; width: 100%">
                           <FarPoint:FpSpread ID="FpSpread1" runat="server" BorderColor="Black" BorderStyle="Solid"
                                 BorderWidth="1px" Height="100%" Width="100%">
                                 <CommandBar BackColor="Control" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"
                                    ButtonShadowColor="ControlDark">
                                 </CommandBar>
                                 <Sheets>
                                    <FarPoint:SheetView SheetName="Sheet1">
                                    </FarPoint:SheetView>
                                 </Sheets>
                              </FarPoint:FpSpread>

                              <%--<asp:GridView ID="GridView1" runat="server" Height="100%" Width="100%">
                              </asp:GridView>--%>

                        </td>
                     </tr>
                  </table>
            </td>
         </tr>
      </table>
</form>
</body>
</html>

sam · sam

Hi iceman:

说明：我知道可以通过Js来计算得出表格应该的高度。
这种办法，我不想使用，我是想问的是否可以直接通过html和css是否可以解决以上表格的自适应高度的问题。

谢谢！

iceman · iceman

回复 2楼sam的帖子

Hi Sam ,

我理解你的意思。

Spread 本身无法支持该功能，如果实现自适应高度，可以通过以下思路实现。
从截图中的结果可以看出：

FpSpread1 DIV 为Spread 最外层容器，所以需要从该 DOM 节点开始设置，直到最后的 tr 节点。

如果在实现过程中遇到什么问题，我们可以一起讨论。

谢谢

		自动登录	找回密码
密码			立即注册

Spread表格控件如何做到自适应高度?

2 个回复

活字格认证

微信认证勋章

元老葡萄