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

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

WBOY
WBOYOriginal
2016-06-24 11:14:581020browse



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


回复讨论(解决方案)

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

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

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

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

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

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




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

<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>

求助啊 怎么解决==

你这个要求智能累自己,要做到上下两个各自不一样大这个需要把一张打的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 然后我就试着这么做了
Statement:
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