为网页元素确定合适的宽度
在做页面时，尤其是做表格时，经常需要判断各列的宽度。当然浏览器具有自动调整各列宽度的功能，但是当表格中各个单元格内容字数相关太多时，则表格呈现出 来的效果很差，有的列非常窄，有的列很宽，比例严重失调。 此时，就需要指定某些列的宽度。那么，多宽合适呢？有时可以有用百分比，但有时取决于你要显示的文字多少，做成固定的像素。我经历了好几次这样的事情，总记不住多少像素能够显示多少字，现在做了一个小程序测试了一下，并将结果保存下来，这样再需要时，直接使用就可以了。
下面先来看一个例子，在自动调整宽度时，表格比例失调。
上面这个例子，表格变形严重，前4列内容很少，应该将前4列设置为固定宽度，不让其出现水平方向的压缩，不让表头出现换行。那么，各列应该多少呢，就需要根据字数来估计像素值了。这就用到了本文要讨论的内容。
我做了一个小例子，用来直观的显示不同像素宽度，以及可以容纳的文字数。运行效果如下。
页面中使用的字体为 body { font-family: 宋体, Arial ;font-size: 12px;}
此程序用JavaScript做比较好，不依赖于服务器。但是我用C#更熟练，而JS不太熟，用JS做这个东西恐怕要花不少时间，为了节约时间，就用C#做这个程序了。代码如下：
ASPX文件
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
body { font-family: 宋体, Arial ;font-size: 12px;}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Table ID="table1" runat="server"/>
</div>
</form>
</body>
</html>
CS文件
public partial class Test02 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
buildTable();
}
private void buildTable()
{
int[] width = { 20, 50, 60, 100, 150, 200, 240 };
TableRow row = new TableRow();
for (int i = 0; i < width.Length; i++)
{
TableCell cell = new TableCell();
cell.Text = width[i].ToString() + "px";
cell.HorizontalAlign = HorizontalAlign.Center;
row.Cells.Add(cell);
}
table1.Rows.Add(row);
row = new TableRow();
for (int i = 0; i < width.Length; i++)
{
TableCell cell = new TableCell();
Label l = new Label();
l.BorderStyle = BorderStyle.Solid;
l.Width = width[i];
l.BorderWidth = 1;
if (i > 2)
l.Text = "一二三四五六七八九十";
cell.Controls.Add(l);
row.Cells.Add(cell);
}
table1.Rows.Add(row);
for (int j = 0; j < 2; j++)
{
row = new TableRow();
for (int i = 0; i < width.Length; i++)
{
TableCell cell = new TableCell();
TextBox l = new TextBox();
l.BorderStyle = BorderStyle.Solid;
l.BorderWidth = 1;
l.Width = width[i];
if (j == 0)
l.Text = "一二三四五六七八九十";
else
l.Text = "1234567890";
cell.Controls.Add(l);
row.Cells.Add(cell);
}
table1.Rows.Add(row);
}
}
}
版权所有：基础软件工作室。作者：孙继磊。邮箱：sun.j.l.studio@gmail.com。文章转载请保持此版权信息并注明出处。
作者博客：博客园： http://www.cnblogs.com/FoundationSoft。CSDN博客：http://blog.csdn.net/FoundationSoft
