Heim > Web-Frontend > HTML-Tutorial > HTML表格制作问题_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:14:58
Original
1078 Leute haben es durchsucht



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


回复讨论(解决方案)

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

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

    <table>        <tr>            <td rowspan='2'>内容</td>             </tr>        <tr>            <td>内容</td>            <td>内容</td>        </tr>    </table>
Nach dem Login kopieren
Nach dem Login kopieren

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

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

    <table>        <tr>            <td rowspan='2'>内容</td>             </tr>        <tr>            <td>内容</td>            <td>内容</td>        </tr>    </table>
Nach dem Login kopieren
Nach dem Login kopieren




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

<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>
Nach dem Login kopieren

求助啊 怎么解决==

你这个要求智能累自己,要做到上下两个各自不一样大这个需要把一张打的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 然后我就试着这么做了
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage