HTML表格布局有更大的差距
我的页面的HTML表格代码在这里 它不会自动调整。我需要删除额外的空格，它们之间只剩下5％的空间。
<table width="95%">
<tr>
<td align="left">
<asp:Button ID="btnTargetVsActual" runat="server" Text="Target Vs Actual" CssClass="selectedButton"
Width="200px" OnClientClick="javascript:return SetFilterAndChart('ctl00_CPHFFR_btnTargetVsActual');" />
<asp:Button ID="btnKPIActivities" runat="server" Text="KPI Activities" CssClass="unSelectedButton"
Width="200px" OnClientClick="javascript:return SetFilterAndChart('ctl00_CPHFFR_btnKPIActivities');" />
</td>
</tr>
<tr>
<td style="width: 100%;white-space: nowrap;">
<asp:Panel ID="pnlMain" runat="server" BorderColor="Navy" BorderWidth="2">
<asp:UpdatePanel runat="server" ID="UpdFilters" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlFilterCriteria" runat="server" GroupingText="Filter Criteria" BorderWidth="1">
<table width="100%">
<tr>
<td align="center" id="tdlblYear">
<asp:Label ID="lblYear" runat="server" Text="Year" CssClass="Label"></asp:Label>
</td>
<td align="center" id="tdlblMonth">
<asp:Label ID="lblMonth" runat="server" Text="Month" CssClass="Label"></asp:Label>
</td>
<td align="center" id="tdlblCountry">
<asp:Label ID="lblCountry" runat="server" Text="Country" CssClass="Label"></asp:Label>
</td>
<td align="center" id="tdlblDivision">
<asp:Label ID="lblDivision" runat="server" Text="Team" CssClass="Label"></asp:Label>
</td>
<td align="center" id="tdlblPosition">
<asp:Label ID="lblPosition" runat="server" Text="Position" CssClass="Label"></asp:Label>
</td>
<td align="center" id="tdlblClass" >
<asp:Label ID="lblClass" runat="server" Text="Class" CssClass="Label"></asp:Label>
</td>
<td align="center" id="tdlblSpecialty">
<asp:Label ID="lblSpecialty" runat="server" Text="Specialty" CssClass="Label"></asp:Label>
</td>
</tr>
<tr style ="white-space: nowrap;">
<td align="left" valign="top">
<asp:DropDownList ID="ddlYear" runat="server" CssClass="dropDownList" Width="98%" >
</asp:DropDownList>
</td>
<td align="left" valign="top">
<asp:Panel ID="pnlMonth" ScrollBars="Auto" runat="server" Height="95px" BorderColor="#003973"
BorderWidth="1px" Width="95%">
<asp:CheckBoxList ID="cblMonth" runat="server" CssClass="checkboxlist">
</asp:CheckBoxList>
</asp:Panel>
</td>
<td align="left" valign="top">
<asp:DropDownList ID="ddlCountry" runat="server" CssClass="dropDownList" Width="95%"
AutoPostBack="true">
</asp:DropDownList>
</td>
<td align="left" valign="top">
<asp:Panel ID="pnlDivision" ScrollBars="Auto" runat="server" Height="95px" BorderColor="#003973"
BorderWidth="1px" Width="95%">
<asp:CheckBoxList ID="cblDivision" runat="server" CssClass="checkboxlist" AutoPostBack="true">
</asp:CheckBoxList>
</asp:Panel>
</td>
<td align="left" valign="top">
<asp:UpdatePanel ID="upPosition" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlPosition" ScrollBars="Auto" runat="server" Height="95px" BorderColor="#003973"
BorderWidth="1px" width="95%">
<asp:CheckBoxList ID="cblPosition" runat="server" CssClass="checkboxlist">
</asp:CheckBoxList>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cblDivision" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
<td align="left" valign="top" >
<center>
<asp:Panel ID="pnlClass" runat="server" Height="95px" BorderColor="#003973" BorderWidth="1px"
Width="35%">
<asp:CheckBoxList ID="cblClass" runat="server" CssClass="checkboxlist">
</asp:CheckBoxList>
</asp:Panel>
</center>
</td>
<td align="left" valign="top">
<asp:UpdatePanel ID="upSpecialty" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlSpecialty" ScrollBars="Auto" runat="server" Height="95px" BorderColor="#003973"
BorderWidth="1px" >
<asp:CheckBoxList ID="cblSpecialty" runat="server" CssClass="checkboxlist">
</asp:CheckBoxList>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cblDivision" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlCountry" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<table width="100%">
<tr>
<td align="center" style="padding: 5px;">
<asp:Button ID="btnGo" runat="server" Text="GO" CssClass="button" />
</td>
</tr>
</table>
<table id="tblTargetVsActual" width="100%" runat="server">
<tr>
<td align="center">
<div id="divSellingDays">
</div>
</td>
</tr>
<tr>
<td align="center">
<div id="divFrequency">
</div>
</td>
</tr>
<tr>
<td align="center">
<div id="divCoverage">
</div>
</td>
</tr>
</table>
<table id="tblKPIActivities" width="100%" runat="server">
<tr>
<td style="width: 50%;" valign="top">
<div id="divCallVolume">
</div>
</td>
<td style="width: 50%;" valign="top">
<div id="divFrequencyByDoctor">
</div>
</td>
</tr>
<tr>
<td style="width: 50%;" valign="top">
<div id="divCallVolumeByClass">
</div>
</td>
<td style="width: 50%;" valign="top">
<div id="divDoctorCoverageByClass">
</div>
</td>
</tr>
<tr>
<td style="width: 50%;" valign="top">
<div id="divFrequencyByClass">
</div>
</td>
<td style="width: 50%;" valign="top">
<div id="divDailyCallRate">
</div>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
并生成此代码的输出，如下所示
我需要删除这些间隙并将空间分配给＆＃34;位置＆＃34;和＆＃34;专业＆＃34;。
提前谢谢！ --------------编辑----- CSS规则.dropDownList
{
font-size: 11px;
font-style: normal; /*font-family: Verdana, Arial, Helvetica, sans-serif;*/
font-family: Arial;
color: Navy;
border: Solid;
border-color: Navy;
border-width: 1px;
width: 150px;
line-height: 12px;
height: 20px;
vertical-align: top;
}
.checkboxlist
{
font-size: 11px;
font-style: normal;
/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
font-family: Arial;
}
1 个答案:
答案 0 :(得分：0)
为什么不用这样选择值来表格：
<table width="100%">
<tr width="100%">
<td width="14%">Year</td>
<td width="14%">Month</td>
<td width="14%">Country</td>
<td width="14%">Team</td>
<td width="16%">Position</td>
<td width="7%">Class</td>
<td width="16%">Speciality</td>
</tr>
<tr width="100%">
<td width="14%">2013</td>
<td width="14%">January<br />June</td>
<td width="14%">All countries</td>
<td width="14%">All teams</td>
<td width="16%">Position</td>
<td width="7%">A</td>
<td width="16%">All speciality</td>
</tr>
使每个单元格在行中的百分比相同（行的百分比），类更小，位置和专业更宽。
演示： http://jsfiddle.net/goodfriend/XXSMA/2/
我做了基本的桌子。我没有你的资源，但是对你的代码的实现应该不是问题。
另外我注意到你为这个班级分配了35％的宽度。也许如果你给位置和专业125％，它也可能有用。但我认为将行的100％部分划分为行中的每个单元格更好。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？