Home > Web Front-end > HTML Tutorial > HTML表格制作问题_html/css_WEB-ITnose

HTML表格制作问题_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:14:58
Original
1078 people have browsed it



如图,如何在同一个table里有两行,让上下两行单元格宽度不同


回复讨论(解决方案)

table 有 colspan 和 rowspan 属性  加到td标签上  
colspan  纵向合并
rowspan 横向合并

比如下面就是表格单元横跨两行的表格  纵向的用法一样

    <table>        <tr>            <td rowspan='2'>内容</td>             </tr>        <tr>            <td>内容</td>            <td>内容</td>        </tr>    </table>
Copy after login
Copy after login

table 有 colspan 和 rowspan 属性 加到td标签上
colspan 纵向合并
rowspan 横向合并

比如下面就是表格单元横跨两行的表格 纵向的用法一样

    <table>        <tr>            <td rowspan='2'>内容</td>             </tr>        <tr>            <td>内容</td>            <td>内容</td>        </tr>    </table>
Copy after login
Copy after login




上下两行单元格宽度不一样,但是同一个表中一旦改变一个都会一起变化 ,我想让上下宽度不一样,就像“享受低保”的宽度不和“姓名”一样,怎么实现?

<table  class="table1" cellspacing="1" cellpadding="0" width="100%" align="center">	<td class="td2" rowspan=7 width=105>关爱工作情况</td>	<!-- 第一行-->		<td class="td2" rowspan=3 width=125>干部"一对一联系帮扶情况"</td>	<tr>			<td class="td2">姓名</td>			<td class="td2">性别</td>			<td class="td2" colspan=2>单位</td>			<td class="td2" colspan=2>职务</td>			<td class="td2" colspan=3>联系电话</td>	</tr>					<tr>					<td class="td2"><input type="textfield" style="width:94%; height:100%;border:0;"></td>			<td class="td2">				<select style="width:98%; height:100%;border:0;">				<option value="man" selected=“selected”>男</option>				 <option value="woman">女</option>				</select>			</td>			<td class="td2" colspan=2><input type="textfield" style="width:95%; height:100%;border:0;"></td>			<td class="td2" colspan=2><input type="textfield" style="width:97%; height:100%;border:0;"></td>			<td class="td2" colspan=4><input type="textfield" style="width:97%; height:100%;border:0;"></td>		</tr>	<td class="td2" rowspan=3>救助情况</td>		<tr>				<td width=150 class="td2">享受低保</td>				<td width=150 class="td2">临时救助</td>				<td width=150 class="td2">医疗救助</td>				<td width=150 class="td2">住房救助</td>				<td width=150 class="td2">入住养老机构</td>				<td class="td2" colspan=3>其他救助</td>		</tr>			<tr>				<td class="td3"><input type="textfield" style="width:94%; height:100%;border:0;"></td>				<td class="td3"><input type="textfield" style="width:94%; height:100%;border:0;"></td>				<td class="td3"><input type="textfield" style="width:94%; height:100%;border:0;"></td>				<td class="td3"><input type="textfield" style="width:94%; height:100%;border:0;"></td>				<td class="td3"><input type="textfield" style="width:94%; height:100%;border:0;"></td>				<td class="td3" colspan=3><input type="textfield" style="width:99; height:100%;border:0;"></td>			</tr></table>
Copy after login

求助啊 怎么解决==

你这个要求智能累自己,要做到上下两个各自不一样大这个需要把一张打的table表,切割成很小很小的单元。
然后通过td标签的 colspan属性将相邻的多个单元格拼接在一起。

上面是你要的姓名,下面是享受低保。。。
不过,只要你用到表格,填写的时候都会因为字符长度影响到格子大小的。

你这个要求智能累自己,要做到上下两个各自不一样大这个需要把一张打的table表,切割成很小很小的单元。
然后通过td标签的 colspan属性将相邻的多个单元格拼接在一起。

上面是你要的姓名,下面是享受低保。。。
不过,只要你用到表格,填写的时候都会因为字符长度影响到格子大小的。

如果这个对你有帮助请点击,我的小尾巴。。。。 http://www.virtureworld.com谢谢




只能说要求就是这样的 ,一模一样的。我后来在行里又嵌套了一个table==既可以调节宽度了


你这个要求智能累自己,要做到上下两个各自不一样大这个需要把一张打的table表,切割成很小很小的单元。
然后通过td标签的 colspan属性将相邻的多个单元格拼接在一起。

上面是你要的姓名,下面是享受低保。。。
不过,只要你用到表格,填写的时候都会因为字符长度影响到格子大小的。

如果这个对你有帮助请点击,我的小尾巴。。。。 http://www.virtureworld.com谢谢




只能说要求就是这样的 ,一模一样的。我后来在行里又嵌套了一个table==既可以调节宽度了
这是一种方法,不过这个在线填表的话不会受到字符长度影响吗?



你这个要求智能累自己,要做到上下两个各自不一样大这个需要把一张打的table表,切割成很小很小的单元。
然后通过td标签的 colspan属性将相邻的多个单元格拼接在一起。

上面是你要的姓名,下面是享受低保。。。
不过,只要你用到表格,填写的时候都会因为字符长度影响到格子大小的。

如果这个对你有帮助请点击,我的小尾巴。。。。 http://www.virtureworld.com谢谢




只能说要求就是这样的 ,一模一样的。我后来在行里又嵌套了一个table==既可以调节宽度了
这是一种方法,不过这个在线填表的话不会受到字符长度影响吗?


不知道哎,我们同事说可以嵌套一个table 然后我就试着这么做了
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template