Home > Web Front-end > HTML Tutorial > 如何不改tr和td代码改变表格内边距?_html/css_WEB-ITnose

如何不改tr和td代码改变表格内边距?_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2016-06-21 09:46:21
Original
1474 people have browsed it

	<table width=386 height=74 border=1  cellpadding=0 cellspacing=0 bordercolor=#cccccc class="table1">		<tbody >			<tr>				<td width= 129 >	</td>				<td height=17 align=right width=57>2013</td>				<td align=right width=57>2012</td>				<td width=66 align=right>Change</td>				<td width=66 align=right>%</td>			</tr>			<!--上面代码可以改变-->						<!--从此以下14行代码不可以改变-->					  <tr height="17">						<td height="17">条目1</td>						<td align="right">20</td>						<td align="right">-25</td>						<td align="right">93 </td>						<td align="right">17</td>					  </tr>					  <tr height="17">						<td height="17">条目2</td>						<td align="right">14</td>						<td align="right">3.2</td>						<td align="right">67 </td>						<td align="right">231</td>					  </tr>			<!--下面代码可以改变-->		</tbody>	</table>
Copy after login


如何不改变tr和td代码,而改变表格内显示数字与表格边框的padding(内边距)?


回复讨论(解决方案)

从目前的代码看,要加上内边距需要对TD做CSS样式设定
如果不希望改变TD,可以试试在TD里加上DIV,把文本内容放置DIV内,之后对DIV设置CSS样式

利用css控制,这样就不用修改tr td的代码

LZ可以通过JS改变TD的样式,例如:

$(.table1 tr td).each(function() {    $(this).css({ "padding": "0px 5px 0px 5px" });});
Copy after login

楼上的鲜货啊! 收走了

谢谢conanhhy。我按照你的思路,直接在css中加入了。很好用。

.table2 tbody tr td{padding:5px;}
Copy after login


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