table的固定宽度和百分比宽度问题

unicode 2010-11-17 01:36:31
有两个table, 第一个有5列，宽度是container的100%， 第二个有两列，宽度是40%。两个table在最左边都加了一个带checkbox的列，宽度是20px。第一个table的显示效果是我需要的，但是第二个怎么才能让它的col1, col2和第一个的col1,col2对齐呢？



<html xmlns="http://www.w3.org/1999/xhtml">

<head><title></title>

	<style type="text/css">

		.gvSelect

		{

			width:20px;

			background-color:#cccccc;

		}

		.gvColumn

		{

			text-align:left;

			width:20%;

			background-color:#cccccc;

		}

	</style>

</head>

<body>

<form name="form1">

	<div class="container">

		<div style="width:100%">

			<table cellspacing="0" rules="all" border="1" style="border-color:#E6E6E6;width:100%;border-collapse:collapse;">

				<tr>

					<th class="gvSelect" scope="col"><input type="checkbox"/></th>

					<th class="gvColumn" scope="col">col 1</th>

					<th class="gvColumn" scope="col">col 2</th>

					<th class="gvColumn" scope="col">col 3</th>

					<th class="gvColumn" scope="col">col 4</th>

					<th class="gvColumn" scope="col">col 5</th>

				</tr>

				<tr style="height:20px;">

					<td><input type="checkbox" /></td>

					<td>row 1</td>

					<td>data</td>

					<td colspan="2">data</td>

					<td>data</td>

				</tr>

				<tr style="height:20px;">

					<td><input type="checkbox" /></td>

					<td>row 2</td>

					<td>data</td>

					<td colspan="2">data</td>

					<td>data</td>

				</tr>

			</table>

		</div>

		<div style="margin-top:10px; width:100%">

			<div style="width:40%">

				<table cellspacing="0" rules="all" border="1" style="border-color:#E6E6E6;width:100%;border-collapse:collapse;">

					<tr>

						<th class="gvSelect" scope="col"><input type="checkbox"/></th>

						<th class="gvColumn" scope="col">col 1</th>

						<th class="gvColumn" scope="col">col 2</th>

					</tr>

					<tr style="height:20px;">

						<td><input type="checkbox" /></td>

						<td>data</td>

						<td>data</td>

					</tr>

				</table>

			</div>

		</div>

	</div>             

</form>

</body>

</html>
...全文
1792 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
unicode 2011-10-19
  • 打赏
  • 举报
 回复
@yangrongliang3，告诉我了我专门给你开一贴
昵称不好起 2011-09-27
  • 打赏
  • 举报
 回复
你要不结贴，兴许我能告诉你 哈哈
unicode 2010-12-10
  • 打赏
  • 举报
 回复
ls的，是这样的，checkbox我们肯定要固定它的宽度是吧。我们的页面是可以改变大小的，而且剩下的column里的内容都是动态加载的，这样一来就要求column的宽带能动态改变适应页面大小，所以就出了个这样的要求
unicode 2010-12-09
  • 打赏
  • 举报
 回复
LS的两个都不行啊，如果缩小或者放大页面的时候还是对不齐
missgd152 2010-12-09
  • 打赏
  • 举报
 回复

单单的去掉/**width:20%;去掉**/还没有太大的效果，还得把 <div style="width:40%">
改成 <div style="width:41.5%">这样，在我电脑上效果算是出来了。
.gvColumn
{
text-align:left;
/**width:20%;去掉**/
background-color:#cccccc;
}
你这个是按要求来的还是？其实要么用像素，要么用百分号，两者用其一最佳。（这只是个建议O(∩_∩)O~）
86y 2010-12-09
  • 打赏
  • 举报
 回复
.gvColumn
{
text-align:left;
/**width:20%;去掉**/
background-color:#cccccc;
}
碧海情天-赵亮 2010-11-17
  • 打赏
  • 举报
 回复 
<html xmlns="http://www.w3.org/1999/xhtml">

<head><title></title>

    <style type="text/css">

        .gvSelect

        {

            width:20px;

            background-color:#cccccc;

        }

        .gvColumn

        {

            text-align:left;

            width:20%;

            background-color:#cccccc;

        }

        .doubleWidth {width:48%;}

    </style>

</head>

<body>

<form name="form1">

    <div class="container">

        <div style="width:100%">

            <table cellspacing="0" rules="all" border="1" style="border-color:#E6E6E6;width:100%;border-collapse:collapse;">

                <tr>

                    <th class="gvSelect" scope="col"><input type="checkbox"/></th>

                    <th class="gvColumn" scope="col">col 1</th>

                    <th class="gvColumn" scope="col">col 2</th>

                    <th class="gvColumn" scope="col">col 3</th>

                    <th class="gvColumn" scope="col">col 4</th>

                    <th class="gvColumn" scope="col">col 5</th>

                </tr>

                <tr style="height:20px;">

                    <td><input type="checkbox" /></td>

                    <td>row 1</td>

                    <td>data</td>

                    <td colspan="2">data</td>

                    <td>data</td>

                </tr>

                <tr style="height:20px;">

                    <td><input type="checkbox" /></td>

                    <td>row 2</td>

                    <td>data</td>

                    <td colspan="2">data</td>

                    <td>data</td>

                </tr>

            </table>

        </div>

        <div style="margin-top:10px; width:100%">

            <div style="width:41%">

                <table cellspacing="0" rules="all" border="1" style="border-color:#E6E6E6;width:100%;border-collapse:collapse;">

                    <tr>

                        <th class="gvSelect" scope="col"><input type="checkbox"/></th>

                        <th class="gvColumn doubleWidth" scope="col">col 1</th>

                        <th class="gvColumn doubleWidth" scope="col">col 2</th>

                    </tr>

                    <tr style="height:20px;">

                        <td><input type="checkbox" /></td>

                        <td>data</td>

                        <td>data</td>

                    </tr>

                </table>

            </div>

        </div>

    </div>             

</form>

</body>

</html>
lxz_jxmz1125 2010-11-17
  • 打赏
  • 举报
 回复
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<style type="text/css">
.gvSelect
{
width:20px;
background-color:#cccccc;
}
.gvColumn
{
text-align:left;
width:20%;
background-color:#cccccc;
}
</style>
</head>
<body>
<form name="form1">
<div class="container">
<div style="width:100%">
<table cellspacing="0" rules="all" border="1" style="border-color:#E6E6E6;width:100%;border-collapse:collapse;">
<tr>
<th class="gvSelect" scope="col"><input type="checkbox"/></th>
<th class="gvColumn" scope="col">col 1</th>
<th class="gvColumn" scope="col">col 2</th>
<th class="gvColumn" scope="col">col 3</th>
<th class="gvColumn" scope="col">col 4</th>
<th class="gvColumn" scope="col">col 5</th>
</tr>
<tr style="height:20px;">
<td><input type="checkbox" /></td>
<td>row 1</td>
<td>data</td>
<td colspan="2">data</td>
<td>data</td>
</tr>
<tr style="height:20px;">
<td><input type="checkbox" /></td>
<td>row 2</td>
<td>data</td>
<td colspan="2">data</td>
<td>data</td>
</tr>
</table>
</div>
<div style="margin-top:10px; width:100%">
<div style="width:40%">
<table cellspacing="0" rules="all" border="1" style="border-color:#E6E6E6;width:100%;border-collapse:collapse;">
<tr>
<th scope="col" style="width:6px;background-color:#cccccc;"><input type="checkbox"/></th>
<th scope="col" style="width:49%;background-color:#cccccc;">col 1</th>
<th scope="col"style="background-color:#cccccc;">col 2</th>
</tr>
<tr style="height:20px;">
<td><input type="checkbox" /></td>
<td>data</td>
<td>data</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>

muheye 2010-11-17
  • 打赏
  • 举报
 回复
建议楼主改用DIV+CSS布局，能实现同样的效果，还更加灵活。也是以后网站前台布局的发展趋势
layui table 列宽百分比显示的实现方法
今天小编就为大家分享一篇layui table 列宽百分比显示的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
flexigrid列表自适应宽度
我们都知道flexigrid表格插件的列宽只能设为固定的值，不能使用百分比来自适应窗口的变化。 本例通过修改flexigrid的源代码来实现列宽的自适应变化。如下使用:{display:'XXX',name:'XXX',width:'30%',sortable:false,align:center',hide: false},内附使用说明txt，这个是本人自己修改的，不足之处请见谅。
BootStrapTable表格利器通用教材
适用人群开发从业人员，产品原型人员，IT相关从业人员，想快速掌握技能的一切人员课程概述特点基于Bootstrap 开发响应式界面，固定表头，完全可配置，支持data属性，显示/隐藏列，显示/隐藏表头，使用AJAX获取JSON数据，点击表头可简单的进行排序，支持自定义列显示，支持单/复选，强大的分页功能，支持名片布局，支持多语言动态列：导出各种格式（支持xls，xlsx的office2003-office2019）
VUE table 列宽度百分比自适应
由于原来项目中 前台列表页面 使用具体数值的列的宽度，有的电脑分辨率问题造成最右侧的需要拉滚动条，考虑到使用更简单 合理，改成百分比。 原代码：<el-table-column label="订单编号" width="170"> 现代码：<el-table-column label="操作" min-width="8.19%"> 转载于:https://www.cn...
Element UI 使用 table 组件设置 el-table-column 宽度width为百分比无效的问题解决方案
问题： 使用 Element el-table 组件时，给列 el-table-column 设置百分比%宽度无效( width="30%" ) 解决： Vue中要将 el-table-column 的宽度设置成百分比的话，不能通过设置 width来实现，而是要设置 min-width，并且每一列都必须设置 min-width。 原因： el-table 组件会被 vue 解析成 html，Vue直接把百分号去掉把数值当做列宽来呈现，所以，width 设置百分比的值直接被解析去掉百分号% 变成 px 了。
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章