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

WBOY
Lepaskan: 2016-06-24 11:14:58
asal
1044 orang telah melayarinya



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


回复讨论(解决方案)

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

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

    <table>        <tr>            <td rowspan='2'>内容</td>             </tr>        <tr>            <td>内容</td>            <td>内容</td>        </tr>    </table>
Salin selepas log masuk
Salin selepas log masuk

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

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

    <table>        <tr>            <td rowspan='2'>内容</td>             </tr>        <tr>            <td>内容</td>            <td>内容</td>        </tr>    </table>
Salin selepas log masuk
Salin selepas log masuk




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

<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>
Salin selepas log masuk

求助啊 怎么解决==

你这个要求智能累自己,要做到上下两个各自不一样大这个需要把一张打的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 然后我就试着这么做了
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan